基于jQuery 之前端国际化 i18n

HTML代码

<body>
<select id="language1">
<option value="zh" selected>中文</option>
<option value="en">English</option>
</select>
<div id="en" data-locale="woshia">我是我是啊</div>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.i18n.properties.js"></script>
<script src="js/language.js"></script>
</body>

js代码

$(function () {
var jsonData = {'lg': ''};
var str = jsonData.lg;
var hh = localStorage.getItem('key');

//localStorage 没有key什么都不干
if (!hh) {
    return;
} else {
    //改变复选框的值,,,不是option
    $('#language1').val(hh);
    change()
}

});
// 复选框改变事件
$('#language1').change(function () {
//封装的放法,每当chang这个select下拉选项时候都会调用 chang方法 把选中的 val 存到localStorage
change()
});
//change 封装成一个方法
function change() {
NaLanguage = $('#language1').val(); //获取选中的语言 zh en

// 把获取选中的 val 赋值给str
str = NaLanguage;
//tsr 存到 localStorage
localStorage.setItem('key', str);


$.i18n.properties({
    name: 'strings',  //配置文件名部分
    path: 'i18n/',    //排位置文件坐在文件位置
    mode: 'map',
    language: NaLanguage,  //对应选择的配置文件
    callback: function () {
        $('[data-locale]').each(function () {
            $(this).html($.i18n.prop($(this).data('locale')));
        });
    }
});

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容