JavaScript で同じクラスの要素すべてを処理したい場合のメモ。
コード
//クリックした際に実行する関数
function ClickFunc(){
console.log('click!');
}
//対象を全て取得
const target = document.getElementsByClassName('target');
//ループして全てに適用する
for(let i = 0; i < target.length; i++) {
target[i].addEventListener('click', ClickFunc, false);
}
サンプル
クリックされた要素のテキストを取得して、メッセージを表示するサンプルです。
デモ
春日をクリックしてトゥース☝できます。
オードリー
若林
春日
JavaScript
function ClickFunc(){
let msg = '「 ' + this.innerText + ' 」 がクリックされたよ ☹';
if (this.innerText == '春日') msg = 'トゥーーーーース！！！'
alert(msg);
}
const target = document.getElementsByClassName('target');
for(let i = 0; i < target.length; i++) {
target[i].addEventListener('click', ClickFunc, false);
}
HTML
<div class="target-wrap">
<div class="target">オードリー</div>
<div class="target">若林</div>
<div class="target">春日</div>
</div>
CSS ( SCSS )
.target-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
width: 100%;
.target {
display: inline-block;
width: 100%;
padding: 1em;
background: lightgray;
text-align: center;
font-weight: 600;
border: 2px solid gray;
border-radius: .5rem;
cursor: pointer;
}
}