如何使用jQuery获取数据属性的值

Question

我正在开发一个html页面的node.js应用程序。此html页面显示根据传递到此页面的数据构建的关联公司列表。建立一个清单，如下所示：

<ul class="notification-body" style="">
    //loop for all assocaite id's passed to this page
    <li class="testClass" data-associateid="<%= assocID %>">
         <span>
             <span class="subject">
                  <label class="btnClass label label-info">ClickMe!</label>
             </span>
         </span>
    </li>

生成的html src看起来像这样：

<ul class="notification-body" style="">
    <li class="testClass" data-associateid="AA01">
    <li class="testClass" data-associateid="AA02">
    <li class="testClass" data-associateid="AA03">

我正在尝试使用Jquery获取数据属性的值，并且尝试了以下操作：

   $(".btnClass").click(function(){
        console.log($".testClass").attr("data-associateid"));
   });

但是每次我在btn上单击时都会输出'AA01'，但我在控制台中没有得到预期的输出：AA01 AA02 AA03

我也尝试了以下方法，但它给了我不确定的含义：

   $(".btnClass").click(function(){
        console.log($(this).find(".testClass").attr("data-associateid"));
   });

Answer 1

您需要使用jQuery.data()。

我创建了一个jsFiddle来显示此工作。

我已经关闭了LI因为AR。

<ul class="notification-body" style="">
    <li class="testClass" data-associateid="AA01">1</li>
    <li class="testClass" data-associateid="AA02">2</li>
    <li class="testClass" data-associateid="AA03">3</li>
</ul>

这是JavaScript：

$(document).ready(function() {
    $('.testClass').on('click', function(){
        alert( $(this).data('associateid') );
    });
});

只要您具有以开头的属性，就data-可以将破折​​号后的字符串作为数据容器引用。在这里，我正在调用jQuery.data()一个对象（LI）并在容器中请求数据associateID。