最近弄的項目是面向國際的,因此老總說要有語言切換功能.第一感受好像不難吧css
網上查了下,感受實現方法就2種:html
一:2個版本的HTML.至於怎麼切換,方法也不少.函數
不過這種方法,除了笨,我實在不知道用什麼詞來形容.spa
二:雙重標籤,一箇中文一個英語,以後用css來控制DOM的display,從而來判斷顯示那種語言.翻譯
<p id="E">English</p> <p id="Z">中文</p> document.getElementById('E').style.display = "block" document.getElementById('Z').style.display = "none"
這種方法,雖然好像不錯,不過當頁面多了,之後很差管理,也會形成頁面的臃腫.code
因此到頭來仍是本身搞吧.既然我那麼喜歡JavaScript,爲啥不用JavaScript來實現呢.htm
其實,原理也不難,傳2個參數,一個是英文文本,一個是中文文本,以後判斷一個全局變量來決定是中譯英仍是英譯中.ip
直接上代碼先:字符串
function instead_of_language(oldLan, newLan) { var temp, all = document.querySelectorAll(".change_lan"); if (change_lan_Z == 0) { temp = newLan; newLan = oldLan; oldLan = temp; } for (i = all.length; i--;) { if (all[i].getAttribute("placeholder") == oldLan) { all[i].setAttribute("placeholder", newLan); } if (all[i].innerHTML == oldLan) { all[i].innerHTML = newLan; } if (all[i].value == oldLan) { all[i].value = newLan; } } }
用法:get
//HTML <span class="change_lan">Update</span> // 給翻譯的標籤加上class值"change_lan" //JavaScript var change_lan_Z = 0; // change_lan_Z等於1時爲中譯英 等於0時爲英譯中 instead_of_language("Update", "更新"); // 判斷的是字符串,因此包括空格或者符號都要加上去
這也是剛剛纔寫的函數,還不是很完善,目前只是支持翻譯標籤的文本和input的placeholder屬性.
若是各位有發現什麼好的改進 或者是BUG的話,歡迎指導批評