使用 jQuery 传递值的数据属性列表

Question

我有一个数据属性列表，但是，jquery 仅获取第一个列表值，当单击第二个或第三个时 "test"，警报仅显示 "house" . http://jsfiddle.net/ar1bd4bj/2/

<ul class="list">
    <li>
<a  data-loc="house" href="#">test</a>        
    </li>
<li>
<a  data-loc="house-2" href="#">test</a>
</li>
    <li>
<a  data-loc="house-3" href="#">test</a>
</li>
</ul>

<script>

$( "ul.list li > a" ).click(function(e) {
    e.preventDefault();

    var data = $('ul.list li > a').data('loc');
     window.location.hash = (data);
    alert(data);

});
</script>

Answer 1

使用$(this)引用当前点击的element

$( "ul.list li > a" ).click(function(e) {
    e.preventDefault();
    var data = $(this).data('loc'); //here
    window.location.hash = (data);
    alert(data);
});

DEMO

Answer 2

使用this代替选择器：

var data = $(this).data('loc');

jsFiddle

Answer 3

您当前的代码总是选择第一个匹配的元素并显示结果，我修改了代码以从点击的元素中选择数据。

$( "ul.list li > a" ).click(function(e) {
        e.preventDefault();

        var data = $(e.target).attr('data-loc');
         window.location.hash = (data);
        alert(data);

    });

使用 jQuery 传递值的数据属性列表

List of data- attribute to pass values with jQuery

jquery

custom-data-attribute