JQuery从单击函数中检索数据属性

Question

我有一个类似的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'));
});

按规定工作。

Answer 1

您的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>

Answer 2

您应该像下面的一样更改您的函数

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

Answer 3

在TypeScript中，箭头函数表达式（() =>）用于保留词法范围。这意味着，当您在箭头函数内部使用this时，它将引用与在函数外部使用this相同的范围。

在您的情况下，您希望函数在onclick事件的作用域中运行，而不是在词法作用域中，因此应避免使用箭头函数，而是使用function ()。

Answer 4

以下是工作解决方案：

jQuery:

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

演示

Answer 5

您可以使用"id"来完成：

<div id='div1' class='element' data-big='join'>JOIN ME</div>

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