从点击的链接返回值时出现问题

Question

我在这样的页面上设置了链接

<a href='' class='contact' data-index='1'>One</a>
<a href='' class='contact' data-index='2'>One</a>
<a href='' class='contact' data-index='3'>One</a>

我试图在单击时返回每个链接的数据索引的值但是每当我点击每个链接时，总是返回第一个链接的数据索引，因为jQuery将选择所有类的链接=页面上的“联系人”。 我想弄清楚如何选择点击链接的数据索引。

我使用这样的东西：

var m_data = $("a#contact").attr("data-index");

我也尝试过这样的事情：

$("a#contact").click(function() {
  var data = $(this).data('index');
});

但数据未定义。

请问我该怎么做？感谢。

Answer 1

#是一个id选择器。哪个应该是唯一的。在jQuery中使用id-selector时，它总会返回第一个元素，因为它不希望再找到任何项目。

更改您的代码

<a data-index="1" class="contact">Whatever</a>

$("a.contact").click(function() {
    var data = $(this).data("index");
});

正如Eskat0n所提到的，自jQuery 1.6以来，jQuery通过data-方法自动获取data()属性

Answer 2

由于数据属性的jQuery 1.6.x值通过jQuery填充到与元素相关联的数据中，因此如果您的html看起来像<a class="contact" data-index="5"></a>，那么您的代码应该可以工作：

$("a.contact").click(function() {
  var data = $(this).data('index');
  // data is "5"
});

正如您所看到的那样有更正：#用于获取需要唯一的id的元素。使用id的类intead作为多重链接元素。

Answer 3

$("a.contact").each(function()
{
    $(this).click(function()
    {
        var data = $(this).attr('data-index');
    });
});

Answer 4

你想要.index()。 This fiddle表示如果链接列表是页面上的唯一列表，以及链接中是否混合了其他DOM元素，则如何使用它。