好的。作为对我的答案的编辑,请遵循:
1 -创建一个名为 language 的文件夹并向其中添加 2 个文件( es.json 和 en.json )
json 文件的结构应该相同,但翻译不同,如下所示:
en.json
{
"date": "Date",
"save": "Save",
"cancel": "Cancel"
}
es.json
{
"date": "Fecha",
"save": "Salvar",
"cancel": "Cancelar"
}
2- 创建一个包含示例 div 的 html 页面,并放置 2 个链接以选择指向步骤 3 中列出的 js 函数的语言。
<a href="#" onclick="setLanguage('en')">English</a>
<a href="#" onclick="setLanguage('es')">Spanish</a>
<div id="div1"></div>
3 -创建 2 个 javascript 函数来获取/设置所选语言:
<script>
var language;
function getLanguage() {
(localStorage.getItem('language') == null) ? setLanguage('en') : false;
$.ajax({
url: '/language/' + localStorage.getItem('language') + '.json',
dataType: 'json', async: false, dataType: 'json',
success: function (lang) { language = lang } });
}
function setLanguage(lang) {
localStorage.setItem('language', lang);
}
</script>
4- 使用可变语言来填充文本。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#div1').text(language.date);
});
</script>
我相信这回答了问题,因为我在多个站点上实现了相同的概念。
注意:您只需使用 JQuery 中的 document.ready 以外的 onclick 事件即可进行即时翻译(无需重新加载)。这取决于你的场景。