仅从页面上的多个按钮定位一个ID（或类）

Question

如何定位我点击的单个按钮，而不是同一页面中具有相同ID或类别的其他按钮？

谢谢！

HTML（超薄代码）

UINT_MAX - 127U

JAVASCRIPT

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

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);

这应该适合你。