javascript - 仅针对页面上多个按钮的一个 ID(或类)

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

你可以使用 this 来做到这一点，它引用 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);
        })
   });

此示例将提醒具有相同类别的按钮的当前名称。希望对您有帮助