[英]JS not executing the code when page loads or refresh
所以我正在用英文浏览器检查这段代码,它工作正常,但是当浏览器在 pt-br 中时,它不会执行 $('.translate').on("change", function(),所以对于网站正常运行,当使用 pt-br 浏览器时,用户需要更改为英语,然后更改为葡萄牙语以应用葡萄牙语选项。如果用户使用 pt-br 浏览器打开页面应该翻译成相应的语言,但它只是改变 select 中的值而已,我该如何解决这个问题?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Multiple Languages with Jquery and Json</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="language" class="translate" style="">
<option value="english">English</option>
<option value="portuguese">Português</option>
</select>
<ul>
<li class="lang" id="home">Home</li>
<li class="lang" id="about">About Us</li>
<li class="lang" id="contact">Contact Us</li>
</ul>
<p class="lang" id="desc">This is my description</p>
<br>
<script type="text/javascript">
var arrLang = {
'english': {
'home': 'Home',
'about': 'About Us',
'contact': 'Contact Us',
'desc': 'This is my description'
},
'portuguese': {
'home': 'Lar',
'about': 'Sobre',
'contact': 'Contato',
'desc': 'Essa é a descrição'
}
};
// Process translation
$(function() {
$('.translate').on("change", function() {
var lang = $(this).val();
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('id')]);
});
});
var userLang = navigator.language || navigator.userLanguage;
$('.translate').val(userLang == "pt-BR" ? "portuguese" : "english");
});
</script>
</body>
</html>
发生这种情况是因为脚本仅在输入更改时执行。
要解决此问题,只需在页面加载时执行翻译。
$(function() {
const arrLang = {
'en': {
'home': 'Home',
'about': 'About Us',
'contact': 'Contact Us',
'desc': 'This is my description'
},
'pt-BR': {
'home': 'Lar',
'about': 'Sobre',
'contact': 'Contato',
'desc': 'Essa é a descrição'
}
}
const userLang = navigator.language || navigator.userLanguage;
function changeLang(lang) {
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('id')]);
});
}
$('.translate').on("change", function() {
changeLang($(this).val());
});
changeLang(userLang);
});
您正确绑定事件并在页面加载时设置下拉列表的值,您缺少的是在页面加载时执行在选择元素更改时执行的代码。
设置select元素的值后,需要手动触发change事件。 我在这里做了(以及一些优化)
// Process translation
$(function() {
// grab a reference to the DOM elements
var $translate = $('.translate');
var $lang = $('.lang');
// get the user language
var userLang = (navigator.language || navigator.userLanguage) == "pt-BR" ? "portuguese" : "english";
$translate
// bind the change event
.on("change", function() {
var lang = $translate.val();
$lang.each(function(index, item) {
var $this = $(this);
var id = $this.attr('id');
$this.text(arrLang[lang][id]);
});
})
// update the value of the language dropdown with the user lang (happens only on page load)
.val(userLang)
// trigger the change event so that the callback gets called (happens only on page load)
.trigger("change");
});
这是一个工作小提琴: https : //jsfiddle.net/jaaireina/0rxma3pg/42/
祝你好运!
你用
if (userLang = "pt-BR")
但是你必须使用
if (userLang == "pt-BR")
让它成为一个比较
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.