javascript - 根据类的组合显示/隐藏 - Javascript Vanilla

Question

我正在制作一个多语言注册网站。我需要检测某个元素是否具有 class="lng" ，该元素指示它将显示或隐藏，具体取决于所选的语言。 (这部分已经可以工作了)。

此外，我需要检测具有 lng 类的元素具有哪个其他类。因此，如果类的组合是lng和en，它将显示英语内容并隐藏所有具有 lng 类的其他元素，其旁边没有 en 类 (`class="lng"class="ru")。

我可以重构 html 元素，使其具有 class="lng en" 如果这会让事情变得更容易......

HTML - 语言选择

<input type="image" id="slo" onclick="setLanguage('sl')">
<input type="image" id="ang" onclick="setLanguage('en')">
<input type="image" id="hrv" onclick="setLanguage('hr')">
<input type="image" id="rus" onclick="setLanguage('ru')">

HTML 示例 - 仅应显示一个，具体取决于所选语言:

<span class="lng" class="sl" class="radioS">Spol: </span>
<span class="lng" class="en" class="radioS">Gender: </span>
<span class="lng" class="hr" class="radioS">Spolov: </span>
<span class="lng" class="ru" class="radioS">секс: </span>

Javascript

function setLanguage(language) {
    var lngs;
    var i;
    lngs = document.getElementsByClassName("lng");
    console.log(lngs);
    for (var i=0;i<lngs.length;i++){
        if (lngs[i].classList.contains(language) !== language) {
            lngs[i].style.display="none";
        } else {
            lngs[i].style.display="inline-block";
        }
    }
}

Answer 1

一开始让它们全部不可见，然后迭代所有输入并检查该类是否包含您的语言:

const lngs = document.getElementsByClassName("lng");

function init() {
  for (var i = 0; i < lngs.length; i++) {
    lngs[i].style.display = "none";
  }
}

init();

function setLanguage(language) {

  debugger
  for (var i = 0; i < lngs.length; i++) {
    if (lngs[i].className.includes(language)) {
      lngs[i].style.display = "block";
    } else {
      lngs[i].style.display = "none";
    }
  }
}

<input type="image" id="slo" onclick="setLanguage('sl')">
<input type="image" id="ang" onclick="setLanguage('en')">
<input type="image" id="hrv" onclick="setLanguage('hr')">
<input type="image" id="rus" onclick="setLanguage('ru')">


<span class="lng sl radioS">Spol: </span>
<span class="lng en radioS">Gender: </span>
<span class="lng hr radioS">Spolov: </span>
<span class="lng ru radioS">секс: </span>