Javascript 网页上的空白页

Question

我想把我的网页变成一个多语言页面，所以我使用了下面的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 文件和 bootstrap 文件显示为 200 状态。

控制台没有错误

有人可以帮忙吗？

提前致谢

Answer 1

这是我的函数版本。它遍历 langs 数组，然后获取 queryselectorAll 个匹配的 lang 元素。如果传递的语言与循环中的数组元素匹配，则显示设置为阻塞，否则设置为 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>

Javascript 网页上的空白页

Javascript blank page on web

javascript

html

jquery

css

multilingual