構築しているサイト全体にいくつかのボタンがあります。特定のボタンには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
});
}
回答 5 件
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-クリックイベントの仕組みを理解するのに役立ちます
関連記事
- 複数のボタンで同じJavaScriptを呼び出す
- C#で動的に生成されたボタンのキーアップイベントを追加します
- 関連するインターフェースがロードされた後にClickイベントをトリガーする方法は?
- Javascript:複数の選択ボックスから値の代わりにテキストを取得する
- ACFフォームに複数の送信ボタンを追加するにはどうすればよいですか?
- テキストの複数のノードを使用してJavascriptでクリックの文字オフセットを確実に取得するには、何を使用できますか?
- onclick属性を持つJavaScriptリンクをクリックします
- javascriptのボタンに一意のIDを与える方法
- クリックイベントでdivのvalueプロパティを取得する
- プログラムが無限ループにあるときに他のボタンをクリックするにはどうすればよいですか?
button--3
のような複数の他のクラスを持つ予定の場合 、…4
……15
、すべての
div
をターゲットにする必要があります クラスが開始する要素(^=
)「ボタン」付き:(CSSでも実行できることに注意してください!)
それが役に立てば幸い。