Problem: Die Änderungsfunktion von Javascript funktioniert nicht

Question

我在使用 JavaScript 更改文本翻译时遇到问题.

这是html代码

document.getElementById('slider-en1').style.visibility = 'hidden';
document.getElementById('slider-id1').style.visibility = 'visible';

Funktion changeFunc() {
  var selectBox = document.getElementById("Language_Select");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  // alarm(selectedValue);
  if (selectedValue == 'id') {
    document.getElementById('slider-en1').style.visibility = 'visible';
    document.getElementById('slider-id1').style.visibility = 'hidden';
  }
  if (selectedValue == 'en') {
    document.getElementById('slider-en1').style.visibility = 'visible';
    document.getElementById('slider-id1').style.visibility = 'hidden';
  }
}

<select class="nav-item has-sub-menu language-selector" id="lingual_select" onchange="changeFunc();">
  <ul class="sub-menu">
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-white" deaktiviert, standardmäßig ausgewählter Wert="">Sprache</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="id" value="id">Indonesien</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="en" value="en">Englisch</option>
    </li>
  </ul>
</select>


<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1">
  <p class="slide-subtitle Narrow-Centerd-Text">
    Indonesien Indonesien Indonesien
  </p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1">
  <p class="slide-subtitle Narrow-Centerd-Text">
    de de de
  </p>
</div>

我尝试使用 JavaScript 显示和隐藏内容，但我的代码无法正常工作

Answer 1

UL LI不是select的有效子元素。

然而，我简化了您的代码以提高效率。

我为每个语言div添加了一个data属性。该属性保存表示内容的语言值。我还创建了一个名为"active"的css类，它将显示适当的语言div，并将语言div默认隐藏。

然后，我使用事件处理程序而不是内联事件（onchange），这是更好的方法，也将帮助您在将来做更多事情。

在我的事件监听器中，我只是获取所选值。然后，我查看是否有任何带有active类的语言div，如果有，则删除它。然后，我找到并将active类添加到适当的语言div。

这个过程将帮助您扩展代码，因为您不需要关心if语句。

let langSelect = document.querySelector("#language_select");

langSelect.addEventListener("change",(e) => {
   let shown = document.querySelector(".active[data-lang]");
   if(shown)shown.classList.remove("active");
   document.querySelector(`[data-lang='${langSelect.value}']`).classList.add("active")
});

[data-lang]{visibility:hidden}
.active[data-lang]{visibility:visible;}

<select class="nav-item has-sub-menu language-selector" id="language_select">
      <option disabled selected value="">Language</option>
      <option value="id">Indonesia</option>
      <option value="en">English</option>
</select>


<div class="col-9 col-md-10 col-lg-8 mx-auto active" data-lang="id" id="slider-id1">
  <p class="slide-subtitle narrow-centerd-text">
    indonesia indonesia indonesia
  </p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" data-lang="en" id="slider-en1">
  <p class="slide-subtitle narrow-centerd-text">
    en en en
  </p>
</div>