获取被点击元素的属性值

Question

<ul id='langs'>
   <li data-val='en'>english</li>
   <li data-val='fr'>francais</li>
   <li data-val='it'>italiano</li>
</ul>

当用户点击其中任何一个时,<li>我想要alert()它的data-val属性值

谁知道怎么样？

Answer 1

原始答案 - 2011年

$('li').click(function () {
    alert($(this).data('val'));
});

见DEMO.

更新 - 2017年

请记住,如果要使用ES6 箭头函数语法,则无法使用this,而是需要使用e.currentTarget,e将事件对象作为第一个参数传递给事件处理程序:

$('li').click(e => alert($(e.currentTarget).data('val')));

见DEMO.

Answer 2

这应该做的工作:

$(document).ready(function() {

  $('#langs li').click(function() {
    alert($(this).attr('data-val'));
  });
});

看看文档

Answer 3

$('li').click(function() {
    alert($(this).attr('data-val'));
});