jQuery使用同一个类的多个按钮返回一个值[重复]

This question already has an answer here:

这个问题在这里已有答案：

Getting the ID of the element that fired an event 17 answers
获取触发事件的元素的ID 17个答案

I have a list of entries generated by PHP, each in their own div and each with a unique ID. I'm trying to develop an AJAX call that can remove each entry based on their ID, however whenever I run the script below, it always returns 0.

我有一个PHP生成的条目列表，每个条目都在自己的div中，每个条目都有一个唯一的ID。我正在尝试开发一个AJAX调用，可以根据它们的ID删除每个条目，但是每当我运行下面的脚本时，它总是返回0。

<div>
    Some entry here
    <button id="0" class="remove">Remove</button>
</div>
<div>
    Another entry here
    <button id="1" class="remove">Remove</button>
</div>
// ... and so on

<script>
    $(".remove").click(function() {
        var id = $(".remove").attr('id');
        alert(id); // debug
        // AJAX call here
    });
</script>

Previously I tried the same thing except the other way around - the id returned by PHP was in the class attribute and the id attribute had the value 'remove' and this only returned 0 for the first button. The second button didn't invoke the jQuery script at all.

以前我尝试过相同的东西，除了相反的方式 - PHP返回的id在class属性中，id属性的值为'remove'，而第一个按钮只返回0。第二个按钮根本没有调用jQuery脚本。

How can I pass a unique ID to the same jQuery call?

如何将唯一ID传递给同一个jQuery调用？

5 个解决方案

#1

Try this

尝试这个

$(".remove").click(function() {
    var id = $(this).attr('id'); // $(this) refers to button that was clicked
    alert(id);
});

#2

Just use this.id to get id of the element

只需使用this.id来获取元素的id

$(".remove").click(function() {
  alert(this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  Some entry here
  <button id="0" class="remove">Remove</button>
</div>
<div>
  Another entry here
  <button id="1" class="remove">Remove</button>
</div>

#3

The vanilla option for future viewers.

未来观众的香草选择。

Select all elements with class remove
选择具有类删除的所有元素
Iterate through the elements, assigning a click handler
遍历元素，分配单击处理程序
On click remove the parent element
单击时删除父元素
Log the id to the console
将id记录到控制台

(function () {
    "use strict";
    var buttons = document.getElementsByClassName('remove');
    for ( var i in Object.keys( buttons ) ) {
        buttons[i].onclick = function() {
            this.parentElement.remove();
            console.log(this.id);
        };
    }
})();

<div>Some entry here
    <button id="0" class="remove">Remove</button>
</div>
<div>Another entry here
    <button id="1" class="remove">Remove</button>
</div>

#4

You need to use the this keyword to refer to the clicked element:

您需要使用this关键字来引用单击的元素：

$('.remove').click(function() {
    var id = this.id;
    // OR
    var id = $(this).attr('id');
});

#5

$(".remove").on("click",function() {
    var id = $(this).attr('id');
    console.log(id);
});

#1