获取被点击元素的属性值

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 arrow function语法，则无法使用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'));
  });
});

查看Docs

Answer 3

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