javascript - jQuery从onclick函数检索数据属性

我有这样的div结构:

<div class='bar'>
    <div class='contents'>
        <div class='element' data-big='join'>JOIN ME</div>
        <div class='element' data-big='play'>PLAY ME</div>
        <div class='element' data-big='list'>GO TO LIST</div>
        <div class='element' data-big='chart'>GO TO TOP 10</div>
    </div>
</div>

如何通过onClick函数引用其数据属性？

我尝试过

$(".bar .element").on('click', ()=> {
    alert($(this).data('big'));
});

但是它总是警告“未定义”。

编辑:

从一开始我的主张就很糟糕，我使用的是Typescript语言中的lambda(或箭头)表达式。这使关键字“this”具有不同的含义。

摘录:

$(".bar .element").on('click', function(){
    alert($(this).data('big'));
});

按照预期工作。

最佳答案

您的HTML中没有.barra(与原始JS-$(".barra .element") 一样)中的，并且您没有正确编写回调:

$(".bar .element").on('click', function() {
    alert($(this).data('big'));
});

    $(".bar .element").on('click', function() {
        alert($(this).data('big'));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bar'>
    <div class='contents'>
        <div class='element' data-big='join'>JOIN ME</div>
        <div class='element' data-big='play'>PLAY ME</div>
        <div class='element' data-big='list'>GO TO LIST</div>
        <div class='element' data-big='chart'>GO TO TOP 10</div>
    </div>
</div>