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

【问题标题】：JQuery Retrive data-attribute from on click functionJQuery从onclick函数中检索数据属性
【发布时间】：2023-03-22 07:29:01
【问题描述】：

我有一个这样的 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 函数引用他们的 data 属性？

我试过了

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

但它总是提示“未定义”。

编辑：

我的断言从一开始就很糟糕，我使用的是 Typescript 语言中的 lambda（或箭头）表达式。这使得关键字“this”的含义不同。

sn-p：

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

按预期工作。

【问题讨论】：

.on('click', ()=> ???是什么样的语法？
你能确认一下jQuery是什么版本的吗？ "As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object"
@Wolf .on('click', ()=> ??? 是什么样的语法？这是相当于 .on('click', funtion(){} 的 Typescript 语法);
@A.Wolff 这是ES6 construct
@A.Wolff 当有足够多的浏览器支持它的时候：)

标签： javascript jquery html typescript custom-data-attribute

【解决方案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>

【讨论】：

我知道我原来的 sn-p 的类选择器有错字，但问题不存在。我的回调函数语法错误，我使用的是打字稿 lambda 语法，而不是通常的 javascript 语法。无论如何，我将您标记为正确答案，因为您使用了 JQuery“数据”方法。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这是可行的解决方案：

jQuery:

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

DEMO

【讨论】：

【解决方案4】：

你可以使用“id”来做到这一点：

&lt;div id='div1' class='element' data-big='join'&gt;JOIN ME&lt;/div&gt;

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

【讨论】：

我不想在我的元素上添加 ID

【解决方案5】：

你应该像下面这样改变你的功能

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

【讨论】：