根據瀏覽器語言重定向

Question

嗨，我有一個簡單的應用程序，用戶可以在英語和波蘭語之間選擇要在我的應用程序中使用的語言。

當用戶打開我的網站時，這是我想要的行為：

• 如果瀏覽器語言=英語，則切換到波蘭語。
• 如果瀏覽器語言=波蘭語，則不執行任何操作。
• 假設波蘭語是默認語言。

因為它是一個非常簡單的應用程序，所以我使用jQuery進行翻譯。

以下是我到目前為止的解決方案：

JSFIDDLE： 演示

 //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> 

不幸的是，我的解決方案無法正常工作。 我的代碼有什么問題？

Answer 1

• userLang返回en-GB因此語言是兩個小寫字符，而國家/地區則是兩個大寫字符，因此if語句應為if(userLang == 'pl-PL')而不是if(userLang == 'pl-pl')總是用你的方式返回假

• 但是，您只需要語言對嗎？ 您可以嘗試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> 

Answer 2

請嘗試以下操作，希望對您有所幫助

$(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")]);
        });
    });
});

Answer 3

屬性名稱區分大小寫。

您在arrLang使用的波蘭語的財產名稱與英語的財產名稱不同。 pl-pl是Valentine而en-gb是valentine 。 但是您的key="valentine"在pl-pl尋找后者（后者不存在）。

將它們都小寫，等等。

var arrLang = {
  "pl-pl": {
    "valentine": "Do Walentynek zostało już tylko",
  },
  "en-gb": {
    "valentine": "Remaining days to Valentines!",
  }
}