jquery - .data() 仅获取第一个列表项的数据属性？

Question

为什么这段代码只重复获取第一个数据属性？

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);
});

我的jsfiddle示例。

Answer 1

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

代替

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

尝试

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

检查小提琴

并使用 console.log 进行调试，而不是警告语句。