.data()只获取第一个列表项的数据属性?

时间:2013-08-11 02:02:45

标签: jquery custom-data-attribute

为什么此代码只重复获取第一个数据属性?

HTML

<ul class="als-wrapper">
    <li class="als-item"><a data-loc-subject="test value"><img src="http://www.ikea.com//us/en/images/products/pugg-wall-clock__13080_PE040801_S4.jpg" height="100" width="100"/></a>test value</li>
    <li class="als-item"><a data-loc-subject="a second value"><img src="http://www.ikea.com//us/en/images/products/pugg-wall-clock__13080_PE040801_S4.jpg" height="100" width="100"/></a>a second value</li>
    <li class="als-item"><a data-loc-subject="a third value"><img src="http://www.ikea.com//us/en/images/products/pugg-wall-clock__13080_PE040801_S4.jpg" height="100" width="100"/></a>a third value</li>
</ul>

的jQuery

$( ".als-item" ).click(function(e) {
    e.preventDefault();

    var data = $('.als-item a').data('loc-subject');
    alert(data);
});

My jsfiddle example.

1 个答案:

答案 0 :(得分:1)

您需要使用this上下文并获取每个列表元素中锚点的数据属性。

而不是

var data = $('.als-item a').data('loc-subject'); 

尝试

var data = $(this).find('a').data('loc-subject');

<强> Check Fiddle

并使用console.log进行调试而不是警告声明。