Masalah: Fungsi perubahan Javascript tidak berfungsi

Question

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

这是html代码

document.getElementById('slider-en1').style.visibility = 'tersembunyi';
document.getElementById('slider-id1').style.visibility = 'kelihatan';

function changeFunc() {
  var selectBox = document.getElementById("language_select");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  // alert(selectedValue);
  if (selectedValue == 'id') {
    document.getElementById('slider-en1').style.visibility = 'kelihatan';
    document.getElementById('slider-id1').style.visibility = 'tersembunyi';
  }
  if (selectedValue == 'en') {
    document.getElementById('slider-en1').style.visibility = 'kelihatan';
    document.getElementById('slider-id1').style.visibility = 'tersembunyi';
  }
}

<select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
  <ul class="sub-menu">
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-white" dilumpuhkan nilai lalai yang dipilih="">Bahasa</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="id" value="id">Indonesia</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="en" value="en">Bahasa Inggeris</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">
    indonesia indonesia indonesia
  </p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1">
  <p class="slide-subtitle narrow-centerd-text">
    en en en
  </p>
</div>

我尝试过使用jquery，但仍然无法正常工作。谢谢您的回答

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

Answer 1

UL LI bukan elemen anak pilihan yang sah.

Namun, saya memudahkan kod anda untuk kecekapan.

Saya menambahkan atribut data pada setiap div bahasa. Sifat ini memegang nilai bahasa yang mewakili kandungan. Saya juga mencipta kelas css yang dipanggil "aktif" yang akan menunjukkan div bahasa yang sesuai dan menjadikan div bahasa tersembunyi secara lalai.

Kemudian saya menggunakan pengendali acara dan bukannya acara sebaris(onchange) yang merupakan cara yang lebih baik dan juga akan membantu anda melakukan lebih banyak lagi pada masa hadapan.

Dalam pendengar acara saya, saya hanya mendapat nilai yang dipilih. Saya kemudian melihat jika terdapat sebarang div bahasa dengan kelas aktif, dan jika ya, padamkannya. Saya kemudian mencari dan menambah kelas aktif ke div bahasa yang sesuai.

Proses ini akan membantu anda memanjangkan kod anda kerana anda tidak perlu mengambil berat tentang kenyataan.

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>