ページ上の複数のボタンからID（またはクラス）を1つだけターゲットに設定する

Question

同じページ内の同じIDまたはクラスを持つ他のボタンをクリックすると、どのようにターゲットを設定できますか？

ありがとうございます！

HTML（スリムコード）

.dropdown 
    button.dropbtn 
     = cta_copy1 
    #myDropdown.dropdown-content 
     a href="#home" Women 
     a href="#about" Men 
     a href="#contact" Kids 

JAVASCRIPT

$(document).ready(function(){ 
    function ctaDropMenu() { 
     document.getElementById("myDropdown").classList.toggle("show"); 
    } 

    $(".dropbtn").click(ctaDropMenu); 

    // Close the dropdown if the user clicks outside of it 
    window.onclick = function(event) { 
     if (!event.target.matches('.dropbtn')) { 

     var dropdowns = document.getElementsByClassName("dropdown-content"); 
     var i; 
     for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
      openDropdown.classList.remove('show'); 
      } 
     } 
     } 
    } 
}); 

Answer 1

Updated Fiddle。

最初にid属性は同じドキュメント内で一意である必要があります。代わりに、共通クラスを使用できます。

私はなぜあなたはjQueryのコードでvanillaJsを混合しているかわからないが、あなたが（それはユニークだ場合）関連.dropdown-contentまたは#myDropdownをターゲットにする場合に使用できます。

$(this).closest('.dropdown').find('.dropdown-content').toggleClass('show'); 

あなたのイベントでした

$(".dropbtn").on('click', function(){ 
    var current_dropdown = $(this).closest('.dropdown').find('.dropdown-content'); 

    $('.dropdown-content').not(current_dropdown).removeClass('show'); 
    current_dropdown.toggleClass('show'); 
}); 

希望すると便利です。

$(".dropbtn").on('click', function(){ 
 
    var current_dropdown = $(this).closest('.dropdown').find('.dropdown-content'); 
 

 
    $('.dropdown-content').not(current_dropdown).removeClass('show'); 
 
    current_dropdown.toggleClass('show'); 
 
});

.dropbtn { 
 
    width: 200px; 
 
    background: none; 
 
    border: 2px solid #000; 
 
    color: black; 
 
    padding: 10px; 
 
    font-family: $secondary; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
} 
 

 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #ffffff; 
 
    color: #002b54; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #ffffff; 
 
    width: 200px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 99; 
 
} 
 

 
.dropdown-content a { 
 
    color: #002b54; 
 
    padding: 12px 16px; 
 
    font-family: $secondary; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    display: block; 
 
} 
 

 
.dropdown a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.show { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="dropbtn">Click Me</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">Click Me</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

Answer 2

あなたはDOM に現在の要素を指し、これを使用することによってそれを行うことができ、我々は次のボタン

<button name="btn1" class="btn">Btn1</button> 
<button name="btn2" class="btn">Btn2</button> 
<button name="btn3" class="btn">Btn3</button> 
<button name="btn4" class="btn">Btn4</button> 

JavaScriptコードが

のようになりますを持っていることができます

$(document).ready(function() { 
     $('.btn').click(function(){ 
      alert(this.name); 
     }) 
    }); 

この例同じクラスを持つボタンの現在の名前を警告します。私はそれがあなたを助けてくれることを願っています

Answer 3

あなたの機能でイベントへの参照を渡したいと思います。

function ctaDropMenu(event) { 
    var target = $(event.currentTarget); 
    target.toggleClass("show"); 
} 

$(".dropbtn").click(ctaDropMenu); 

これはあなたのためのトリックを行う必要があります。