我使用 i18next js 解决方案创建了一个语言切换器。每次我单击链接更改语言时，新语言都会显示一秒钟 - 然后网站切换回 init 函数中设置的语言。
有人知道我该如何解决吗？我认为它与 document(ready) 功能有关，但是当我删除它时 - 没有任何效果:/
谢谢!
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/i18next-1.7.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.i18n.init(
{
lng: 'en-US'
},
function(t) {
// translate nav
$(".nav").i18n();
});
$('.changeLng').click(function() {
$.i18n.setLng("de-DE", function(t) {
$(".nav").i18n();
});
});
});
</script>
</head>
<body>
<a href="index.html?setLng=de-DE" class="changeLng">change to de</a>
<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>
</ul>
</body>
</html>
最佳答案
试试这个代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/i18next-1.7.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.i18n.init(
{
lng: 'en-US'
},
function(t) {
// translate nav
$(".nav").i18n();
});
$('.changeLng').click(function() {
$.i18n.setLng("de-DE", function(t) {
$(".nav").i18n();
});
});
});
</script>
</head>
<body>
<a href="#" class="changeLng">change to de</a>
<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>
</ul>
</body>
</html>
当您单击版本中的链接时，您将重新加载页面，并且语言将再次设置为“en-US”(当再次调用 document.ready 函数时)。在此版本中，页面不会重新加载，因此语言更改仍然存在。
关于javascript - i18next - 语言切换无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27153030/