問題: Javascript の変更関数が無効です

Question

私たちは JavaScript の修正版翻訳を使用中に問題に遭遇しました。

これはhtml代詞

です。

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

関数changeFunc() {
  var selectBox = document.getElementById("言語選択");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  // アラート(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=" language_select" onchange="changeFunc();">
  <ul class="サブメニュー">
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-white" 無効デフォルト選択値="">言語</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="id" value="id">インドネシア</option>
    </li>
    <li class="nav-item sub-menu-item">
      <option class="nav-link sub-menu-link text-dark" id="en" value="en">英語</option>
    </li>
  </ul>
</選択>


<div class="col-9col-md-10col-lg-8mx-auto" id="slider-id1">
  <p class="スライドサブタイトルナローセンターテキスト">
    インドネシア インドネシア インドネシア
  </p>
</div>
<div class="col-9col-md-10col-lg-8mx-auto" id="slider-en1">
  <p class="スライドサブタイトルナローセンターテキスト">
    えんえんえん
  </p>
</div>

jquery を使用してみましたが、正常に動作しませんでした。

我尝试は JavaScript 表示と隐藏コンテンツを使用していますが、我的代网無法通常工作

Answer 1

UL LI は select の有効な子要素ではありません。

ただし、効率を高めるためにコードを簡略化しました。

各言語 div にデータ属性を追加しました。このプロパティは、コンテンツを表す言語値を保持します。また、適切な言語 div を表示し、言語 div をデフォルトで非表示にする「active」という CSS クラスも作成しました。

次に、インライン イベント(onchange) の代わりにイベント ハンドラーを使用しました。これはより良い方法であり、将来さらに多くのことを行うのにも役立ちます。

私のイベント リスナーでは、選択された値を取得するだけです。次に、アクティブなクラスを持つ言語 div が存在するかどうかを確認し、存在する場合はそれを削除します。次に、アクティブなクラスを見つけて、適切な言語 div に追加します。

このプロセスは、if ステートメントを気にする必要がないため、コードを拡張するのに役立ちます。

リーリー リーリー リーリー