用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而不是选择器：

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

jsFiddle

Answer 2

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

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

演示

Answer 3

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

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

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

    });