Javascript jQuery使用同一个类的多个按钮返回一个值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30389073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery using multiple buttons of the same class to return a value
提问by SteppingHat
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 调用？
采纳答案by Alexander T.
Try this
尝试这个
$(".remove").click(function() {
var id = $(this).attr('id'); // $(this) refers to button that was clicked
alert(id);
});
回答by Alexander T.
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
- 选择所有具有类的元素
remove - 遍历元素，分配点击处理程序
- 单击删除父元素
- 将 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>回答by Pranav C Balan
Just use this.idto 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>回答by Amit Soni
$(".remove").on("click",function() {
var id = $(this).attr('id');
console.log(id);
});
回答by Jake Opena
You need to use the thiskeyword to refer to the clicked element:
您需要使用this关键字来引用被点击的元素：
$('.remove').click(function() {
var id = this.id;
// OR
var id = $(this).attr('id');
});
