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

您没有.barra（ ，就像您原来的JS - $(".barra .element") ）元素一样HTML并且您没有正确编写回调：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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'));
});

DEMO

Answer 5

你可以使用＆＃34; id＆＃34;这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery从onclick函数中检索数据属性

5 个答案: