Jquery i18n 简单使用，实现语言切换
2018-04-16 本文已影响704人
Eternal丶星空
现在网站的国际化越来越重要，为此特地学习了一下i18n。可以实现中英文切换。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="nav">
<li>
<a href="#" data-i18n="nav.home">你好</a>
</li>
<li>
<a href="#" data-i18n="nav.page1">你好</a>
</li>
<li>
<a href="#" data-i18n="nav.page2"></a>
</li>
<input data-i18n="[value]nav.button" type="button" value="查询" id="" />
<input type="text" name="" id="" data-i18n="[placeholder]nav.input" placeholder="请输入名称" />
<button id="Chinese">中文/button>
<button id="English">英文</button>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./common/i18next.js"></script>
<script type="text/javascript">
$(function () {
var lang = 'zh-cn';
var langPath='./common/translationC.json';
changeLang('en-US');
$('#Chinese').on('click',function(){changeLang('zh-cn')});
$('#English').on('click',function(){changeLang()});
function changeLang(langtype){
langPath=langtype=='zh-cn'?'./common/translationC.json':'./common/translationE.json'
$.i18n.init({
lng: lang,
resGetPath: langPath
}, function (err, t) {
$('[data-i18n]').i18n(); // 通过选择器集体翻译
})
}
$("#btn_change").click(changeLang('zh'))
})
</script>
</body>
</html>
本人原创，未经许可禁止转载！
