JavaScript实现--中英语言切换功能

原创
2014/07/04 18:01
阅读数 1.7K

最近弄的项目是面向国际的,所以老总说要有语言切换功能.第一感觉好像不难吧

网上查了下,感觉实现方法就2种:

一:2个版本的HTML.至于怎么切换,方法也很多.

    不过这种方法,除了笨,我实在不知道用什么词来形容.

二:双重标签,一个中文一个英语,之后用css来控制DOM的display,从而来判断显示那种语言.

<p id="E">English</p>
<p id="Z">中文</p>


 document.getElementById('E').style.display = "block"
 document.getElementById('Z').style.display = "none"

    这种方法,虽然好像不错,不过当页面多了,以后不好管理,也会造成页面的臃肿.


所以到头来还是自己搞吧.既然我那么喜欢JavaScript,为啥不用JavaScript来实现呢.

其实,原理也不难,传2个参数,一个是英文文本,一个是中文文本,之后判断一个全局变量来决定是中译英还是英译中.

直接上代码先:

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;
        }
    }

}

用法:

//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的话,欢迎指导批评

展开阅读全文
打赏
0
15 收藏
分享
加载中
L3ve博主

引用来自“MingjunYang”的评论

直用jquery的i18n插件吧
首先我佩服jquery,但是我也讨厌jquery,我还是喜欢原生,我宁可用我自己的库,所以才写的这代码.
2014/07/04 21:51
回复
举报
直用jquery的i18n插件吧
2014/07/04 19:45
回复
举报
更多评论
打赏
2 评论
15 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部