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

Question

나는 PHP를 사용하여 데이터베이스에서 얻은 목록을 동적으로 렌더링합니다. 각 목록은 동일한 클래스를 가지며 변경할 수 없기 때문에 동적으로 렌더링됩니다. JavaScript를 통해 이러한 클래스를 선택하고 클릭 시 이벤트를 생성하여 숨겨진 클래스를 사용하여 클래스를 열고 닫습니다. 이제 문제가 생겼습니다. 이 이벤트는 저에게 효과적이며 첫 번째 렌더링된 목록에만 반응하고 다른 목록에는 반응하지 않습니다. 이를 수행할 수 있는 방법이 있습니까? querySelectorAll 및 getElementsByClassName 등을 시도했습니다.

P粉652523980 · Answer

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

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

으아악

P粉674999420 · Answer

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

만 선택하세요.

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

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

입니다.

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

를 사용할 수 있습니다.

이후에는 .classList.*

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

예

으아아아

참조: