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

元素不应具有相同的ID #rfidbutton而是使用类.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 selectors，如果您愿意，您甚至可以选择data-rfidnumber之类的任意属性。所以任何具有data-rfidnumber属性的元素。

Answer 2

ID对于整个文档是唯一的。更改选择器使用className

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

您不能将ID用于多个元素。请改为使用其中一个类，例如：

$(".btn-tertiary").click(function() {
 // Same click function callback
});

jQuery onClick仅使用第一个按钮

3 个答案: