JS에서 동일한 이름을 가진 여러 클래스를 선택하는 방법

Question

저는 데이터베이스에서 얻은 목록을 동적으로 렌더링하기 위해 PHP를 사용하고 있습니다. 각 목록은 동일한 클래스를 가지며 변경할 수 없기 때문에 동적으로 렌더링됩니다. JavaScript를 통해 이러한 클래스를 선택하고 클릭 시 이벤트를 생성하여 숨겨진 클래스를 사용하여 클래스를 열고 닫습니다.

이제 문제가 생겼습니다. 이 이벤트는 저에게 효과적이며 첫 번째 렌더링된 목록에만 반응하고 다른 목록에는 반응하지 않습니다. 이를 수행할 수 있는 방법이 있습니까? querySelectorAll 및 getElementsByClassName 및 기타 선택기를 시도했지만 아무것도 작동하지 않습니다. PHP 코드:

으아악

자바스크립트 코드:

으아악

다음은 템플릿입니다: 주형 여기에 이미지 설명을 입력하세요

Answer 1

querySelectorAll()而不是querySelector()를 사용해야 합니다.

이 방법을 사용하면 첫 번째로 일치하는 요소 대신 모든 요소를 ​​타겟팅하게 됩니다. 그런 다음 각 이벤트를 반복하고 다음과 같이 이벤트 리스너를 추가해야 합니다.

으아악

Answer 2

첫 번째 .likarton 实例 - 这是通过使用 querySelectorAll()고정

만 선택하세요.

---

addEventListener을 사용하고 있으므로 콜백에서 매개변수로 클릭한 정확한 항목을 가져옵니다.

이 기능을 사용하는 올바른 JavaScript는 addEventListener('click', (event) => {})

입니다.

이벤트 핸들러를 트리거한 요소를 참조하려면 event.currentTarget

를 사용할 수 있습니다.

이후에는 .classList.*

을 사용하여 div를 선택하고 클래스 목록을 수정할 수 있습니다.

---

예

으아아아

---

참조:

• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_value_of_this_within_the_handler
• https://developer.mozilla.org /en-US/docs/Web/API/Element/querySelectorAll#syntax