JS не выполняет код при загрузке или обновлении страницы - PullRequest
Новая
       9

JS не выполняет код при загрузке или обновлении страницы

0 голосов
/ 26 февраля 2020

Так что я проверяю этот код с помощью браузера на английском языке sh, и он работает нормально, но когда браузер находится в pt-br, он не выполняет $ ('. Translate'). On ("change", function (), поэтому для правильной работы сайта при использовании браузера pt-br пользователю необходимо изменить на engli sh и затем на португальский, чтобы применить опцию portuguese. если пользователь открывает страницу с помощью браузера 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>

Ответы [ 3 ]

1 голос
/ 26 февраля 2020

Это происходит потому, что скрипт выполняется только при вводе CHANGES.

Чтобы это исправить, просто выполните перевод при загрузке страницы. 

$(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);
});
0 голосов
/ 26 февраля 2020

вы правильно связываете события и устанавливаете значение раскрывающегося списка при загрузке страницы, чего вам не хватает при выполнении при загрузке страницы кода, который выполняется при замене элемента select.

После того, как вы установите значение элемента select, вам нужно вручную вызвать событие изменения. Я сделал это здесь (вместе с некоторыми оптимизациями) 

// 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/jaireina/0rxma3pg/42/

Удачи!

0 голосов
/ 26 февраля 2020

Вы используете 

if (userLang = "pt-BR")

Но вы должны использовать 

if (userLang == "pt-BR")

Для сравнения

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...