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

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

querySelector を使用する場合、最初の要素のみが選択されることを覚えておくことが重要ですドキュメント内の一致する要素。同じクラスまたは ID を持つ複数の要素がある場合は、最初の要素のみが返されます。

あなたの場合では、カレンダー上の日付を表す同じクラスの曜日を持つ複数のボタンがあります。 。これらのいずれかをクリックしても、querySelector は最初のものだけを選択しているため、機能しません。

解決策は、代わりに querySelectorAll を使用し、すべてのノード リストを返します。一致する要素。次に、リストを反復処理して、それぞれにイベント リスナーをアタッチします。

修正されたコードは次のとおりです:

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

これにより、クラス Week の各要素にイベント リスナーがアタッチされ、どの日付をクリックしてもフォームを開くことができます。

以上が「querySelector」が最初の要素のみを選択する理由とその修正方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。