最近弄的项目是面向国际的,因此老总说要有语言切换功能.第一感受好像不难吧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的话,欢迎指导批评