jQuery 在页面上检索多个 .attr()

Question

这里是新手 - 我知道我在这里遗漏了一些简单的东西。

目标是使用 data-orgid 属性从此 href 检索 orgid。

<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="111">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="222">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="333">Claim Your Listing</a>

我可以使用以下 jquery.

检索第一个实例的属性

// Click - Claim Your Listing
$( "#orgAct-claim" ).click(function() {
    // Acquire orig from onClick attribute and set orgid.
    var orgid = $('#orgAct-claim').attr('data-orgid');
    alert(orgid);
});

Fiddle 这里：https://jsfiddle.net/riverecho/0b7vpyw4/

=====

更进一步，通过将所有实例包装在另一个名为 #listings 的 ID 中，我可以获得至少触发每个实例的属性。但是，每个 .click 事件总是 returns“111”的第一个 orgid。

<div id="listings">
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="111">Claim Your Listing</a>
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="222">Claim Your Listing</a>
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="333">Claim Your Listing</a>
</div>

Fiddle 这里：https://jsfiddle.net/riverecho/w5eqguok/

=====

如何才能将 var 设置为我单击的特定实例：分别为 111、222 或 333？

Answer 1

首先，id 应该是唯一的。所以不要有相同的ID。如果需要，请使用类。但是，在这种情况下，您可以使用在回调中传递的 this，如：

$( "#orgAct-claim" ).click(function() {
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
});

Answer 2

您的 ID 应该始终是唯一的，所以我删除了它们。此外，您可以在点击函数内使用 $(this) 来 return 被点击的元素。由于您也可能不想转到锚标记中指定的 href，因此我使用 event.preventDefault() 来阻止这种情况发生。

$(function() {
  $(".claim").click(function(event) {
    // Acquire orig from onClick attribute and set orgid.
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
    event.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="claim" href="http://www.url.com" data-orgid="111">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" data-orgid="222">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" data-orgid="333">Claim Your Listing</a>

Answer 3

根据 W3C 规范，具有相同 ID 的多个元素是无效的 html。

当您的 CSS select 或者只有一个 ID select 或者 jQuery 使用本机 document.getElementById 方法时，returns只有具有该 ID 的第一个元素。

如果您必须通过重复 ID select，请使用属性 select 或：

$('a[id="orgAct-claim"]');

请看jQuery ID Selector。

所以在你的情况下，正如 Amit Joki 所建议的，你可以使用：

$('a[id="orgAct-claim"]').click(function() {
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
});

jQuery 在页面上检索多个 .attr()

jQuery retrieve multiple .attr() on page

javascript

jquery

attr