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

【问题标题】：List of data- attribute to pass values with jQuery使用 jQuery 传递值的数据属性列表
【发布时间】：2015-10-12 21:52:26
【问题描述】：

我有一个数据属性列表，但是，jquery 只获取第一个列表值，当单击第二个或第三个“测试”时，警报只显示“房子”。 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>

【问题讨论】：

标签： jquery custom-data-attribute

【解决方案1】：

使用this 代替选择器：

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

jsFiddle

【讨论】：

【解决方案2】：

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

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

DEMO

【讨论】：

【解决方案3】：

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

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

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

    });

【讨论】：