Блог

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

 let langs = ['en', 'it', 'sp', 'sv', 'de', 'pt', 'nl'];
let lang = 'en';
setLangStyles(lang);

function setStyles(styles) {
  var elementId = '__lang_styles';
  var element = document.getElementById(elementId);
  if (element) {
    element.remove();
  }

  let style = document.createElement('style');
  style.id = elementId;
  style.type = 'text/css';

  if (style.styleSheet) {
    style.styleSheet.cssText = styles;
  } else {
    style.appendChild(document.createTextNode(styles));
  }
  document.getElementsByTagName('head')[0].appendChild(style);
}

function setLang(lang) {
  setLangStyles(lang);
}

function setLangStyles(lang) {
  let styles = langs
    .filter(function (l) {
      return l != lang;
    })
    .map(function (l) {
      return ':lang('  l  ') { display: none; }';
    })
    .join(' ');

  setStyles(styles);
}
  

Я назвал это «lang.js » и я пометил его в своем HTML-файле таким образом:

 <!-- jquery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lang.js"></script>
  

Локально он работает отлично, но когда он находится на сервере, он вообще не открывает веб-страницу, все, что я вижу, это пустая страница.

Я также попытался записать его внутри html с помощью script> tag, это тоже не сработало.

На вкладке network инструментов разработчика jquery-2.1.4.min.js файл и файлы начальной загрузки отображаются как статус 200.

На консоли нет ошибок

Кто-нибудь может помочь, пожалуйста?

Заранее благодарю вас

Вот моя версия вашей функции. Он перебирает массив языков, затем захватывает один queryselectorAll из соответствующих элементов языка. Если переданный язык соответствует элементу массива в цикле, для отображения устанавливается значение block, в противном случае для него устанавливается значение none.

 langs = ["en", "es"];

function setLangStyles(lang) {
  for (z = 0; z < langs.length; z  ) {
    l = langs[z]
    objs = document.querySelectorAll(":lang("   l   ")");
    objs.forEach(function(el) {
      el.style.display = (l == lang) ? "block" : "none";
    });
  }
}

btns = document.querySelectorAll("button");

btns.forEach(function(e){
   e.addEventListener("click",function(ev){
      setLangStyles(ev.target.dataset.lang);
   });
});

setLangStyles("es");  

 <div lang="en">EN</div>
<div lang="es">ES</div>
<button type="button" data-lang="es">View ES</button>
<button type="button" data-lang="en">View EN</button>