複数のdivがあり、それぞれに同じIDのボタンがあるクリックイベントを作成する方法はありますが、クリックすると親divにのみ影響しますか？

debugcn 投稿 Dev

ベスロポリス：

私の主な問題は、数行のコード（javascript）を記述したり、自分自身を繰り返したりしたくないことです。コードは次のようになります

  <div class="main-div">
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
     <div class="myDiv"> <button class="myBtn" id="myBtn">click me</button> </div>
  </div>

ここで、イベントリスナーをid 'myBtn'に追加して、クリックすると、 'myDiv'のクラスを持つサブ親divが2倍に拡大され、中央に配置される高さが増加しますが、重要ではありません。主な焦点は、JavaScriptを使用して、div全体を選択するのではなく、ボタンが配置されているサブdivのみを選択することです。それとも私はもっと情報を提供すべきですか？

いつも助けて：

あなたは使用することができquerySelectorAll、あなたのクラスを使用して、すべてのボタンを取得するにはforEachメソッドと一緒に方法を。また、より良いcoding実践のために要素id'sは一意でなければなりません。Simpleとtime節約のアプローチ：

また、ウィンドウeventListenerはグローバルであり、ページの他のThing要素に影響を与える可能性があるため、使用しないでください。代わりに、イベントリスナーを実際のボタンにアタッチします。

toggleメソッドを使用しremoveてaddクラスをmyDiv使用するe.target.parentElement

デモ：

let getButtons = document.querySelectorAll('.myBtn') //get all buttons
getButtons.forEach(function(btn) {
  btn.addEventListener('click', function(e) { //attach eventListener
    e.target.parentElement.classList.toggle('myClass') //add Class
  })
})

.myDiv {
  padding: 0.2em;
  margin: 0.2em;
}

.myClass {
  background: green;
}

<div class="main-div">
  <div class="myDiv"> <button class="myBtn" id="myBtn1">click me</button> </div>
  <div class="myDiv"> <button class="myBtn" id="myBtn2">click me</button> </div>
  <div class="myDiv"> <button class="myBtn" id="myBtn3">click me</button> </div>
  <div class="myDiv"> <button class="myBtn" id="myBtn4">click me</button> </div>
  <div class="myDiv"> <button class="myBtn" id="myBtn5">click me</button> </div>
  <div class="myDiv"> <button class="myBtn" id="myBtn6">click me</button> </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-04-7

コメントを追加

サインイン

Related 関連記事

記事