如何在点击按钮时访问其ID？

Question

我有一个按钮，但我不知道它的id。

  <button id="" class="mybtn" type=""></button>

现在我想在单击时获取此按钮的ID。

    ("//what to write here").click(){
      console.log($(this).id);//something like this i want
     }

使用类选择器的问题在于我有多个按钮，因此它会选择所有按钮而不仅仅是被点击的那个。

- Vinita

---

如果你使用 $('.mybtn').on('click', function() { console.log(this.id) })，它只会记录所点击按钮的ID。 - Phil

你可以缩小你的 css 选择器 范围，包括目标按钮的父级元素，例如 .container .wrapper .mybtn::nth-child(3)。 - bertdida

Answer 1

您可以这样做。我已经为语法添加了注释。

$("button.mybtn").on("click", function() {
  console.log($(this).attr("id")); // return blank when no id
  console.log(this.id); // return undefined when no id
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <button id="hello" class="mybtn" type="">Sample</button>
  <button id="hello1" class="mybtn" type="">Sample</button>

- elpmid

---

您可以通过使用"button.mybtn[id]"来确保仅针对带有ID的按钮进行定位。 - Phil

Answer 2

下面的事件处理程序附加到所有带有类.btn的按钮（元素），但由于您一次只能单击一个按钮，因此每次单击您只会看到一个id - 单击的按钮的id:

$('.mybtn').on('click', function() {
    console.log( this.id );
});

$(function() {
    $('.mybtn').on('click', function() {
        console.log( this.id );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <button id="id1" class="mybtn" type="">Button 1</button>
 <button id="id2" class="mybtn" type="">Button 2</button>
 <button id="id3" class="mybtn" type="">Button 3</button>
 <button id="id4" class="mybtn" type="">Button 4</button>

- PeterKA