JS에서 특정 요소만을 선택한 상태로 설정

하고 싶은 일



이런 식으로 요소를 클릭했을 때 클릭한 요소만 선택된 상태로 하고 싶다.


구현 정책


  • click 이벤트 발화시 클래스를 부여
  • 부여한 클래스에 css를 대입한다
  • 클릭되지 않은 요소에서 클래스를 제거하여 클래스를 하나만 부여합니다.

    구현 결과


      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 형식으로 변환해야합니다.

    루프 처리에서 클래스를 제외하면 이미 선택된 요소에서 클래스를 제거하여 선택되지 않은 상태로 만듭니다.
    마지막으로 선택한 요소에 클래스를 부여하여 선택된 상태로 한다.

    참고


  • htps: // t. ly/3fm한 Yw
  • htps : //는 ck에서. jp/아r치ゔぇs/21892/
  • 좋은 웹페이지 즐겨찾기