同じクラスの複数のボタンのクリックイベントのJavascript

bugfix> javascript > 投稿 2020-08-22 18:06

構築しているサイト全体にいくつかのボタンがあります。特定のボタンには1つのクラスがあり、他のボタンには別のクラスがあります。私がやろうとしているのは、個々のボタンのイベントリスナーを持たずに、クリックされたボタンを見つけるための最良の方法を見つけることです。クラスbutton-1およびクラスbutton-2を持つすべてのボタンを見つけるために、以下の2つのforループを作成しました。 javascriptにかなり慣れていないので、悪い習慣にはなりたくないので、これを達成するための最良の方法に関するアドバイスをいただければ幸いです。

<section>
  <div class="button--1"></div>
  <div class="button--1"></div>
  <div class="button--2"></div>
</section>
<section>
  <div class="button--2"></div>
  <div class="button--1"></div>
  <div class="button--2"></div>
</section>
 var button1 = document.querySelectorAll('.button--1');
    var button2 = document.querySelectorAll('.button--2');
    for (var a = 0; a < button1.length; a++) {    
        button1[a].addEventListener('click',function(){
            //do something
        });
    }
    for (var b = 0; b < button2.length; b++) {
        button1[b].addEventListener('click',function(){
            //do something
        });
    }

javascript

回答 5 件

button--3 のような複数の他のクラスを持つ予定の場合、 …4 … …15 、
すべての div をターゲットにする必要がありますクラスが開始する要素（ ^= ）「ボタン」付き：

（CSSでも実行できることに注意してください！）

var allButtons = document.querySelectorAll('div[class^=button]');
console.log("Found", allButtons.length, "div which class starts with “button”.");
for (var i = 0; i < allButtons.length; i++) {
  allButtons[i].addEventListener('click', function() {
    console.clear();
    console.log("You clicked:", this.innerHTML);
  });
}

/* Some styling */
section {
  margin: 8px 0;
  border: 1px solid gray;
}
section div {
  border: 1px solid lightgray;
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  width: 30px;
}
section div[class^=button] {
  background: lightgray;
  cursor: pointer;
}

<span>You can click on the buttons:</span>
<section>
  <div class="button--1">s1-1</div>
  <div class="button--2">s1-2</div>
  <div class="button--3">s1-3</div>
  <div class="button--4">s1-4</div>
</section>
<section>
  <div class="button--1">s2-1</div>
  <div class="button--2">s2-2</div>
  <div class="button--3">s2-3</div>
  <div class="button--4">s2-4</div>
</section>
<section>
  <div class="not-a-button">not1</div>
  <div class="not-a-button">not2</div>
  <div class="not-a-button">not3</div>
  <div class="not-a-button">not4</div>
</section>

それが役に立てば幸い。

querySelctorAll() の文字列で複数のセレクターを使用できます , でそれらを分離することにより

var button1 = document.querySelectorAll('.button--1');
var button2 = document.querySelectorAll('.button--2');
var allButtons = document.querySelectorAll('.button--1, .button--2');
console.log(button1.length);
console.log(button2.length);
console.log(allButtons.length);

<section>
  <div class="button--1"></div>
  <div class="button--1"></div>
  <div class="button--2"></div>
</section>
<section>
  <div class="button--2"></div>
  <div class="button--1"></div>
  <div class="button--2"></div>
</section>

イベントの委任を使用してみてください

(function() {
  document.body.addEventListener("click", clickButtons);
  // ^ one handler for all clicks
  function clickButtons(evt) {
    const from = evt.target;
    if (!from.className || !/button--\d/i.test(from.className)) { return; }
    // ^check if the element clicked is one of the elements you want to handle 
    //  if it's not one of the 'buttons', do nothing
    console.log("you clicked " + from.classList);
  }
}())

.button--1:before,
.button--2:before {
  content: 'BTTN['attr(class)']';
}
.button--1,
.button--2 {
  border: 1px solid #999;
  background: #eee;
  width: 220px;
  padding: 3px;
  text-align: center;
}

<section>
  <div class="b1 button--1 section1"></div>
  <div class="b2 button--1 section1"></div>
  <div class="b3 button--2 section1"></div>
</section>
<section>
  <div class="b4 button--2 section2"></div>
  <div class="b5 button--1 section2"></div>
  <div class="b6 button--2 section2"></div>
</section>

私の提案は、jQueryを使用して、次のようにすることです。

$(document).on('click', '.button--1', function() {
   // Do something
});
$(document).on('click', '.button--1', function() {
   // Do something
})

しかし、純粋なJavascriptのクリーンなアプローチは、イベントのコールバックをバインドする関数を作成することです。

function bindEvent(callback, eventType, targets) {
   targets.forEach(function(target) {
     target.addEventListener(eventType, callback);
   });
};

var button1 = document.querySelectorAll('.button--1');
var button2 = document.querySelectorAll('.button--2');
bindEvent(function() {
   // do something
}, 'click', button1);
bindEvent(function() {
   // do something
}, 'click', button2);

ザ・ click イベントは、単一の要素でポインティングデバイスボタン（通常はマウスのプライマリボタン）が押されて離されると発生します。

このドキュメントは、MDN-クリックイベントの仕組みを理解するのに役立ちます

Trends

bugfix

同じクラスの複数のボタンのクリックイベントのJavascript

javascript

関連記事