[英]Redirection according to browser language
Hi I have a simple app where the user can select the language to use in my app between English and Polish. 嗨,我有一个简单的应用程序,用户可以在英语和波兰语之间选择要在我的应用程序中使用的语言。
When the user opens my website, this is the behavior I want: 当用户打开我的网站时,这是我想要的行为:
Because it's a very simple app, I'm using jQuery for translation. 因为它是一个非常简单的应用程序,所以我使用jQuery进行翻译。
Below is my solution so far: 以下是我到目前为止的解决方案:
//redirect $(document).ready(function() { var userLang = navigator.language || navigator.userLanguage; if (userLang == "pl-pl") { break; } else { userLang = "eng-gb" } } }); // translation // The default language is Polish var lang = "pl-pl"; // Check for localStorage support if ('localStorage' in window) { var usrLang = localStorage.getItem('uiLang'); if (usrLang) { lang = usrLang } } var arrLang = { "pl-pl": { "Valentine": "Do Walentynek zostało już tylko", }, "en-gb": { "valentine": "Remaining days to Valentines!", } } $(document).ready(function() { $(".lang").each(function(index, element) { $(this).text(arrLang[lang][$(this).attr("key")]); }); $(".lang").each(function(index, element) { $(this).text(arrLang[lang][$(this).attr("key")]); }); // get/set the selected language $(".translate").click(function() { var lang = $(this).attr("id"); // update localStorage key if ('localStorage' in window) { localStorage.setItem('uiLang', lang); } $(".lang").each(function(index, element) { $(this).text(arrLang[lang][$(this).attr("key")]); }); }); });
<div class="translate"> <ul class="language"> <li class="eng translate" id="en-gb">EN</li> <li class="pl translate" id="pl-pl">PL</li> </ul> </div> <div class="rss-feed"> <p class="lang" key="valentine">Do Walentynek zostało już tylko </p> <span id="mybenfit-timer" class="lang" key="days"> </span> </div>
Unfortunately, my solution is not working. 不幸的是,我的解决方案无法正常工作。 What is wrong with my code?
我的代码有什么问题?
the userLang
return en-GB
so the language is two lowercase characters and the country two uppercase characters so the if statement should be if(userLang == 'pl-PL')
not if(userLang == 'pl-pl')
it will always return false by your way userLang
返回en-GB
因此语言是两个小写字符,而国家/地区则是两个大写字符,因此if语句应为if(userLang == 'pl-PL')
而不是if(userLang == 'pl-pl')
总是用你的方式返回假
BUT while you just need the language right? 但是,您只需要语言对吗? you can try This .. and always use the language in two lowercase characters .. no need to use
pl-pl
or en-GB
you can use pl
or en
您可以尝试This ..并始终以两个小写字符使用该语言。.无需使用
pl-pl
或en-GB
您可以使用pl
或en
//redirect $(document).ready(function() { var userLang = navigator.language || navigator.userLanguage; console.log(userLang); var userLang = userLang.split('-')[0]; console.log(userLang); var userLang = (userLang !== "pl")? 'en' : 'pl'; console.log(userLang); var arrLang = { "pl": { "Valentine": "Do Walentynek zostało już tylko", }, "en": { "valentine": "Remaining days to Valentines!", } } console.log(arrLang[userLang].valentine); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Try the following I hope it helps 请尝试以下操作,希望对您有所帮助
$(document).ready(function() {
// translation
// The default language is English
var userLang = navigator.language || navigator.userLanguage;
var lang = "pl-pl";
// If Browser Language == English then switch to the Polish language.
// since there en-GB en-US ...
if(userLang.split('-')[0] == 'en'){
lang = "pl-pl";
}
// Check for localStorage support
if('localStorage' in window){
var usrLang = localStorage.getItem('uiLang');
if( typeof(usrLang) === 'string' && usrLang !== 'undefined') {
lang = usrLang
}
}
var arrLang = {
"pl-pl": {
"valentine": "Do Walentynek zostało już tylko",
"days": " 10 dni"
},
"en-gb": {
"valentine": "Remaining days to Valentines!",
"days": " 10 days"
}
}
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
// get/set the selected language
$(".translate").click(function(e) {
e.stopPropagation();
var lang = $(this).attr("id");
// update localStorage key
if('localStorage' in window){
localStorage.setItem('uiLang', lang);
}
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]);
});
});
});
Property names are case sensitive. 属性名称区分大小写。
Your property name for Polish in arrLang
is different to that of English. 您在
arrLang
使用的波兰语的财产名称与英语的财产名称不同。 pl-pl
is Valentine
while en-gb
is valentine
. pl-pl
是Valentine
而en-gb
是valentine
。 But your key="valentine"
looks for the latter in pl-pl
which does not exist. 但是您的
key="valentine"
在pl-pl
寻找后者(后者不存在)。
Lowercase them both et voila. 将它们都小写,等等。
var arrLang = {
"pl-pl": {
"valentine": "Do Walentynek zostało już tylko",
},
"en-gb": {
"valentine": "Remaining days to Valentines!",
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.