Javascript 在一个页面上的多个按钮中只针对一个ID（或类）

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

谢谢

HTML（超薄代码） JAVASCRIPT

$（文档）.ready（函数（）{
函数菜单（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
$（“.dropbtn”）。单击（下拉菜单）；
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

首先，

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”）。在（'click'，function（）上{
var current_dropdown=$（this）.closest（'.dropdown'）。find（'.dropdown content'）；
$（'.dropdown content'）.not（current_dropdown）.removeClass（'show'）；
当前_下拉列表。toggleClass（'show'）；
});
.dropbtn{
宽度：200px；
背景：无；
边框：2倍实心#000；
颜色：黑色；
填充：10px；
字体系列：$secondary；
字体大小：16px；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#ffffff；
颜色：#002b54；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#ffffff；
宽度：200px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：99；
}
.下拉内容a{
颜色：#002b54；
填充：12px 16px；
字体系列：$secondary；
文字装饰：无；
文本转换：大写；
显示：块；
}
.下拉菜单a:悬停{
背景色：#f1f1
}
.show{
显示：块；
}

点击我
点击我
您可以使用它来完成，它引用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>

此示例将提醒具有相同类的按钮的当前名称。我希望它能帮助您在函数中传递对事件的引用

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

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

这应该对你有帮助。
他不想要“removeClass”吗，因为如果他使用toggleClass，对dom的后续单击会将“show”类添加回这些元素？我不确定为什么要在
窗口上使用另一个单击事件，但我只是想告诉他当前单击对象的用法
$（此）
而不是其他ID相同的按钮
这太可怕了！！ID必须是唯一的[FIDDLEJS]（）
    <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>

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

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

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