页面加载或刷新时 JS 不执行代码

Question

所以我用英文浏览器检查这段代码，它工作正常，但是当浏览器在 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>

Answer 1

发生这种情况是因为脚本仅在输入更改时执行。

要解决此问题，只需在页面加载时执行翻译。

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

Answer 2

您使用

if (userLang = "pt-BR")

但是你必须使用

if (userLang == "pt-BR")

比较

Answer 3

您正确地绑定了事件并在页面加载时设置了下拉列表的值，您缺少的是在页面加载时执行在 select 元素发生更改时执行的代码。

设置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");
});

这是一个有效的 fiddle：https://jsfiddle.net/jaireina/0rxma3pg/42/

祝你好运！

页面加载或刷新时 JS 不执行代码

JS not executing the code when page loads or refresh

html

javascript

jquery

translation