그래서 li내 앱이 동적으로 생성하는 요소가 있으며 li를 클릭하면 CSS 클래스를 토글하고 싶습니다 . 이벤트 위임을 통해이 작업을 수행하고 있지만 li토글하기 위해 클릭 한에 액세스하는 방법을 모르겠습니다 .
지금 내가 가지고있는 것은 다음과 같습니다.
var listElement = document.querySelector("ul");
listElement.addEventListener("click", function(e) {
if (e.target && e.target.nodeName == 'LI') {
// How would I access the clicked li and apply
// the .classList.toggle("class")?
}
});
사용 Element.closest()상의 Event.target하여 클릭 된 목록 항목을 찾기 위해 ( target). 목록 항목을 찾은 경우의 active모든 자식에서 클래스를 제거 ul하고 target.
var listElement = document.querySelector("ul");
listElement.addEventListener("click", function(e){
var target = e.target.closest('li');
if(target) {
e.currentTarget.querySelectorAll('li')
.forEach(li => li.classList.remove('active'));
target.classList.add('active')
};
});.active {
color: red;
}<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3</span></li>
<li><span>item 4</span></li>
<li><span>item 5</span></li>
</ul>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다