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

你的.barra沒有.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'));
});

DEMO

Answer 5

你可以使用“id”來做到這一點：

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

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