ホームページ  >  記事  >  ウェブフロントエンド  >  「querySelector」が最初の要素のみを選択する理由とその修正方法

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

Susan Sarandon
Susan Sarandonオリジナル
2024-11-06 00:06:02267ブラウズ

Why Does `querySelector` Only Select the First Element and How to Fix It?

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

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

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

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

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

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。