なぜ `querySelector` は `.weekdays` クラスの最初の要素だけを選択するのでしょうか?

querySelector は最初の要素のみを選択します

コードでは、querySelector を使用して .weekdays クラス内の要素を取得しています。ただし、このメソッドは、指定されたセレクターに一致する最初の要素のみを選択します。同じクラスに複数の日付があるため、最初の「1」の日付のみがキャプチャされます。

修正方法: querySelectorAll を使用します

すべての日付を選択するには.weekdays クラス内では、querySelectorAll を利用する必要があります。このメソッドは、指定されたセレクターに一致するすべての要素を含む NodeList を返します。コードを修正する方法は次のとおりです。

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

説明:

このコード:

1. querySelectorAll を呼び出して、 .weekdays クラスを取得し、NodeList に保存します。
2. 反復forEach を使用して、NodeList 内の各要素を追加します。
3. 要素ごとに、クリックされたときにモーダルを表示するクリック イベント リスナーを追加します。

querySelectorAll を使用すると、すべての要素が選択されます。 .weekdays クラス内の日付を設定し、それぞれにイベント リスナーをアタッチして、どの日付でもモーダル表示をトリガーできるようにします。

以上がなぜ `querySelector` は `.weekdays` クラスの最初の要素だけを選択するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。