JS에서 특정 요소만을 선택한 상태로 설정
하고 싶은 일
이런 식으로 요소를 클릭했을 때 클릭한 요소만 선택된 상태로 하고 싶다.
구현 정책
구현 결과
resultItem.addEventListener('click', (e) => {
const selectedItems = document.getElementsByClassName('selected')
if (selectedItems) { //初回は選択状態の要素がないので条件分岐しないとエラーが発生しそう
Array.prototype.slice.call(selectedItems).forEach(item => {
item.removeAttribute('class') //一度クラスが付与されたdiv要素を全て外し1つだけ選択されている状態にする
})
}
resultItem.setAttribute('class', 'selected') //選択状態にする
})
})
})
우선 getElementsByClassName에서 selected 클래스가 부여된 요소를 정리해 취득.
다음에 취득한 요소에 대해 removeAttribute를 실행한다. getElementsByClassName은 HTMLCollectiom을 반환하기 때문에
forEach를 사용하려면 Array.prototype.slice.call을 사용하여 한 번 Array 형식으로 변환해야합니다.
루프 처리에서 클래스를 제외하면 이미 선택된 요소에서 클래스를 제거하여 선택되지 않은 상태로 만듭니다.
마지막으로 선택한 요소에 클래스를 부여하여 선택된 상태로 한다.
참고
Reference
이 문제에 관하여(JS에서 특정 요소만을 선택한 상태로 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/togo_mentor/items/21742c64a4bb5a3ed17b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)