如何使用jquery在单击的每个按钮中获取数据属性
如何使用jquery在单击的每个按钮中获取数据属性
提问于 2016-06-21 06:13:54
我对jquery相当陌生，我想在我的应用程序中使用它。我有一个包含如下数据的表：
<tbody>
<tr>
<td>Ariel <button id="edit" data-id="<?php echo $row->id_user; ?>Edit</button></td>
<td>ariel@abc.com</td>
<td>27</td>
</tr>
<tr>
<td>Noel <button id="edit" data-id="<?php echo $row->id_user; ?>Edit</button></td>
<td>noel@abc.com</td>
<td>31</td>
</tr>
<tr>
...
</tr>
</tbody>当单击<button>时，我试图使用jquery获取数据id。这是我的密码：
$(function() {
var btn = $("#edit"),
id = btn.data("id");
btn.on("click", function() {
console.log(id);
});
});只有可以记录的第一行。我不知道语法。我该怎么办？
@已更新@
我找到了一个使用类而不是id的解决方案。在某些元素中具有相同的id是无效的。所以我用这个：
<button class="edit" data-id="<?php echo $row->id_user; ?>">Edit</button>并在jquery中做一些更改：
$(".edit").each(function() {
var $this = $(this),
id = $this.data("id");
$this.on("click", function() {
console.log(id);
});
});回答 5
Stack Overflow用户
回答已采纳
发布于 2016-06-21 06:18:07
不能在单个网页中多次使用相同的id。使用class代替。
$(function() {
var btn = $(".edit");
btn.on("click", function() {
var data = $(this).data("id");
console.log(data);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tbody>
<tr>
<td>Ariel <button class="edit" data-id="id-1">Edit</button></td>
<td>ariel@abc.com</td>
<td>27</td>
</tr>
<tr>
<td>Noel <button class="edit" data-id="id-2">Edit</button></td>
<td>noel@abc.com</td>
<td>31</td>
</tr>
<tr>
...
</tr>
</tbody>
Stack Overflow用户
发布于 2016-06-21 06:30:53
首先，我们不应该定义具有相同id的多个HTML元素。你可以把身份证改到教室然后试试这个..。
$(function() {
$("button.edit").on("click", function() {
var id = $(this).data("id");
console.log(id);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tbody>
<tr>
<td>Ariel <button class="edit" data-id="id-1">Edit</button></td>
<td>ariel@abc.com</td>
<td>27</td>
</tr>
<tr>
<td>Noel <button class="edit" data-id="id-2">Edit</button></td>
<td>noel@abc.com</td>
<td>31</td>
</tr>
</tbody>
Stack Overflow用户
发布于 2016-06-21 06:20:07
您正在使用"id"，它在代码中被认为是唯一的两次。jQuery与第一个匹配，因为它假定ids是唯一的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37936799
复制相关文章
相似问题
腾讯云开发者
