「querySelector」が最初の要素のみを選択するのはなぜですか?これを修正するにはどうすればよいですか?

querySelector が最初の要素のみを選択する理由とその修正方法

querySelector について

JavaScript では、querySelector メソッドは最初の要素を選択します指定されたセレクター文字列に基づいて、ドキュメント内の一致する要素。複数の要素がセレクターに一致する場合、最初の要素のみが返されます。

問題の説明

提供された CodePen では、querySelector を使用して class Week の要素を選択しています。ただし、最初に一致した要素のみがクリック イベントをトリガーし、他の要素はトリガーしないことがわかります。

解決策: 複数の要素に querySelectorAll を使用する

この問題に対処するには、querySelectorAll を使用する必要があります。代わりにメソッドを使用して、一致するすべての要素を含む NodeList を返します。次に、NodeList を反復処理して、各要素にイベント ハンドラーをアタッチできます。

改訂コード:

document.querySelectorAll(".weekdays").forEach(elem => {
  elem.addEventListener("click", () => {
    document.querySelector(".bg-modal").style.display = "flex";
  });
});

説明:

• document.querySelectorAll( ".weekdays"): クラスweekdayを持つすべての要素を選択し、それらをNodeList.
• forEach: NodeList 内の各要素を反復処理します。
• elem.addEventListener("click", ...): クリック イベント リスナーを各曜日要素にアタッチします。前と同じコードでフォームのモーダルを表示します。

ここで、平日の要素をクリックすると、モーダルが表示されます。が正しく表示され、最初の要素のみを選択する querySelector で発生していた問題が修正されます。

以上が「querySelector」が最初の要素のみを選択するのはなぜですか?これを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。