jQuery onClick仅使用第一个按钮

Question

我有这个jQuery

$("#rfidbutton").click(function() {
 var rfid = $(this).data('rfidnumber');
 $(".modal-body #rfidbox").val( rfid );
 $("#rfidtitle").text( 'Save RFID - ' + rfid );
 Cookies.set("rfid=" + rfid);
 //Cookies.get("rfid");
});

按钮看起来像这样

<a class="btn btn-tertiary btn-xs" data-toggle="modal" href="#rfid" data-rfidnumber="1" id="rfidbutton"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs" data-toggle="modal" href="#rfid" data-rfidnumber="2" id="rfidbutton"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs" data-toggle="modal" href="#rfid" data-rfidnumber="3" id="rfidbutton"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs" data-toggle="modal" href="#rfid" data-rfidnumber="4" id="rfidbutton"><i class="fa fa-id-card-o"></i> Click here</a>

问题是当单击按钮时,"1"始终保存在cookie中.如何获取单击按钮的data-rfidnumber ,而不是第一个？

Answer 1

元素不应该#rfidbutton使用相同的id 而是使用类.rfidbutton.

<a class="btn btn-tertiary btn-xs rfidbutton" data-toggle="modal" href="#rfid" data-rfidnumber="1"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs rfidbutton" data-toggle="modal" href="#rfid" data-rfidnumber="2"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs rfidbutton" data-toggle="modal" href="#rfid" data-rfidnumber="3"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs rfidbutton" data-toggle="modal" href="#rfid" data-rfidnumber="4"><i class="fa fa-id-card-o"></i> Click here</a>

而js ......

$(".rfidbutton").click(function() {
 var rfid = $(this).data('rfidnumber');
 $(".modal-body #rfidbox").val( rfid );
 $("#rfidtitle").text( 'Uložit RFID - ' + rfid );
 Cookies.set("rfid=" + rfid);
 //Cookies.get("rfid");
});

ID应该是唯一的,jQuery只返回带有您要求的ID的第一个元素.如果使用类选择器,它将返回该类的所有元素.

我建议阅读jQuery选择器,你甚至可以通过任意属性选择,data-rfidnumber如果你想要的话.所以任何具有该data-rfidnumber属性的元素.