フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

CSSセレクタで指定した複数イベントターゲット要素の共通/限定処理

div.itemがいくつかあるが、いずれかclickした対象だけを赤くして他を青くしたい。

See the Pen querySelectorAll and forEach by pokkur (@pokkur) on CodePen.

js
const item = document.querySelectorAll('.item')

Array.prototype.forEach.call(item, (e) => {
    e.addEventListener('click', (e) => {
        Array.apply(null, item).forEach((e) => e.style.background = `hsl(358, 100%, 62%)`) // clickされてないitemは青く
        e.currentTarget.style.background = `hsl(196, 100%, 53%)` // clickされたitemは赤く
    }, false)
})

どなたか、これもっと使い勝手良いヘルパーとかつくってださい……。

[紹介元] CSSタグが付けられた新着投稿 – Qiita CSSセレクタで指定した複数イベントターゲット要素の共通/限定処理

コメント

記事に戻る

コメントを残す