JSで特定の要素だけを選択した状態にする

3425 ワード
JavaScript React jQuery JavaScript テキストリンク

やりたいこと

こんな感じで要素をクリックしたときにクリックした要素のみ選択された状態にしたい。

実装方針

  • clickイベント発火時にクラスを付与
  • 付与したクラスに対してcssをあてる
  • クリックされていない要素からクラスを外すことで1つだけにクラスが付与されている状態にする

実装結果

  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型に変換する必要がある。

ループ処理の中でクラスを除外することで、既に選択された要素からクラスを外し、非選択状態にする。
最後に選択した要素にクラスを付与することで選択された状態にする。

参考