网络上的Javascript空白页

问题描述

我想使我的网页成为多语言页面，所以我使用了以下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>

在本地它可以完美运行，但是当它在服务器上时，它根本无法打开网页，我所看到的只是一个空白页面。

我也尝试过使用script>标记将其写在html内，它也不起作用。

在开发工具的网络标签中，jquery-2.1.4.min.js文件和引导文件显示为200状态。

控制台上没有错误

有人可以帮忙吗？

提前谢谢

解决方法

这是您的功能的我的版本。它遍历整个lang数组，然后获取"extractCss": false个匹配的lang元素。如果所传递的语言与循环中的数组元素匹配，则显示将设置为“阻止”，否则将其设置为“无”。

queryselectorAll

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");