jquery - 通过 Jquery 输出 HTML 5 数据属性

Question

我试图在单击后输出每个链接的 data-id 属性，但是因为两个链接具有相同的 href 属性，所以我的 jquery 选择器只显示“雅虎”，这是第一个链接的属性。有更好的主意吗？

<a href="#test" data-id="yahoo">yahoo.co.uk</a>
<a href="#test" data-id="google">Google.co.uk</a>

console.log($("a[href$='#test']").data('id'));

Answer 1

您是否尝试使用 获取所有元素data-id中的所有元素href="#test"？在这种情况下，您将能够：

$('a[href="#test"]').map(function() { return $(this).data('id'); });

Answer 2

使用click处理程序。引用将this是被单击的 dom 元素。

<script>
   $("a[href='#test']").click(function(e) {
      // DOM element --> jQuery element
      var el = $(this);
      console.log(el.data('id'));
      e.preventDefault();
      return false;
   });
</script>

Answer 3

console.log($("a[href$='#test']").data('id'));

只会第一次出现

尝试这个

$("a[href$='#test']").each(function(){
    console.log($(this).data('id')); 
});

小提琴 http://jsfiddle.net/kGRVu/

Answer 4

是的，给你...

$("a[href^='#test']").click(function(e){
   e.preventDefault();
   console.log($(this).data('id'));

});

但是您的链接不太可能实际上具有相同的href ...所以我只会给它们一个通用类作为选择器...

 <a href="www.google.com" class="link" data-id="google">Google</a>

然后访问该类....

$("a.link").click(function(e){
   e.preventDefault();
   console.log($(this).data('id'));
});