使用 onclick 事件动态更改 javascript 源

Question

我是 JavaScript 初学者，遇到以下问题， 我有 2 种语言的多个页面。以后可能会更多。我使用 javascript var 来设置语言。要么：

Var language=”de”; or var language=”en”;

然后我用它来加载正确的语言文件：

<script src="javascript"+language+".js" type="text/javascript"></script>

有没有办法通过 onclick() 事件更改此变量。所以它会改变并保持改变，直到我再次改变它？

感谢您的宝贵时间。

Answer 1

您可以像这样动态添加脚本：

var selectorEls = document.querySelectorAll(".language-select");
var current;

function _handleClick ( ev ) {
  
  if ( current ) current.parentNode.removeChild(current)

  var language = ev.target.getAttribute("data-language");
  var newScript = document.createElement("script");
  var newSrc = "javascript" + language + ".js";
  newScript.setAttribute("src",newSrc);
  current = newScript;
  document.head.appendChild(newScript);
}

for ( var i = 0; i < selectorEls.length; i += 1 ) {
  
  selectorEls[i].addEventListener("click", _handleClick);
}

<a class="language-select" data-language="en">EN</a>
<a class="language-select" data-language="fr">FR</a>
<a class="language-select" data-language="de">DE</a>

此代码绑定了对多个 <a> 元素的点击，每个元素都有一个语言数据属性。单击一个会使用正确的语言创建一个新的<script> 并将其添加到页面中。它还会删除您之前以这种方式添加的所有脚本，以确保不会发生冲突。