`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 중국어 웹사이트의 기타 관련 기사를 참조하세요!