Target только один идентификатор (или класс) из нескольких кнопок на странице

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 должен быть уникальным в том же документе, вместо того, чтобы вы могли использовать общие классы.

Я не уверен, почему вы смешивание vanillaJs с кодом JQuery, но если вы хотите, чтобы предназначаться связанным с этим .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); 

Это должно сделать трюк для вас.