获取html元素的onclick事件的data- *属性

<a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(?,?);"> Click to do something </a> 

我想获得函数goDoSomething(10, 21)内的data-id和data-option值我试图使用this引用： this.data['id']但它没有工作。

我怎样才能做到这一点？

Answer 1

你可以使用jQuery实现这个$(identifier).data('id') ，

  <script type="text/javascript"> function goDoSomething(identifier){ alert("data-id:"+$(identifier).data('id')+", data-option:"+$(identifier).data('option')); } </script> <a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(this);"> Click to do something </a> 

javascript ：如果你想使用javascript标签，你可以使用getAttribute("attributename") ，

  <script type="text/javascript"> function goDoSomething(d){ alert(d.getAttribute("data-id")); } </script> <a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(this);"> Click to do something </a> 

要么：

  <script type="text/javascript"> function goDoSomething(data_id, data_option){ alert("data-id:"+data_id+", data-option:"+data_option); } </script> <a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(this.getAttribute('data-id'), this.getAttribute('data-option'));"> Click to do something </a> 

Answer 2

喜欢这个：

 $(this).data('id'); $(this).data('option'); 

工作示例： http : //jsfiddle.net/zwHUc/

Answer 3

我简单地使用这个jQuery技巧：

 $("a:focus").attr('data-id'); 

它获得a元素的焦点，并从中获取data-id属性。

Answer 4

这里是一个例子

  <a class="facultySelecter" data-faculty="ahs" href="#">Arts and Human Sciences</a></li> $('.facultySelecter').click(function() { var unhide = $(this).data("faculty"); }); 

这将设置var unhide为ahs，所以使用.data（“foo”）来获得你想要获得的data- *属性的“foo”值

Answer 5

用户$()从你的链接和data()获取你的价值观的jQuery对象

 <a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething($(this).data('id'),$(this).data('option'));"> Click to do something </a>