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

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

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

我怎样才能做到这一点?

5 Solutions collect form web for “获取html元素的onclick事件的data- *属性”

你可以使用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> 

喜欢这个:

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

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

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

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

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

这里是一个例子

  <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”值

用户$()从你的链接和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> 
  • 如何循环和渲染React.js中的元素,而无需映射对象数组?
  • jquery下拉菜单通过点击外部closures
  • jQuery UI单选button - 如何正确切换选中状态
  • datesorting问题与JQuery的Tablesorter
  • 如何使用jQuery切换我的CSS样式表?
  • 在JS / jQuery中触发一个keypress / keydown / keyup事件?
  • 我可以强制jQuery.css(“backgroundColor”)以hex格式返回?
  • 如何使用jQuery指定contentType的jsonp POST请求?
  • 点击或更改使用jQuery的无线电事件
  • 如何读取jqgrid中的userData?
  • 在jQuery中停止所有活动的ajax请求