要素を選択するときにデータIDを見つけることができません

Question

前もって謝罪これは非常に単純な解決策であり、私は重度の脳のおならの真っ只中にいるように感じます。私はES6構文を使用してクリックしているアイテムのデータIDを取得しようとしていますが、どの方法で実行しても定義されません。

HTML

<ul> 
    <li class="list-item" data-id="item-1">Click me</li> 
    <li class="list-item" data-id="item-2">Click me</li> 
    <li class="list-item" data-id="item-3">Click me</li> 
</ul> 

JSが

let $el = $('ul'); 

class List { 
    constructor($el) { 
     this.$el = $el; 

     this.$listItem = $el.find('li'); 

     this.attachHandlers(); 
    } 

    attachHandlers() { 
     this.$listItem.on('click',() => { 
      var data = $(this).attr('data-id'); 
      console.log(data); 
     }); 
    } 
} 

const _init =() => { 
    if ($el.length) { 
     $el.each((i, v) => { 
      new List($(v)); 
     }); 
    } 
}; 

_init(); 

アイブ氏がダウンし、できるだけ多くのコードを単純化し、誰もが私がここで間違ってやっているものを参照してください？

Answer 1

問題はattachHandlersメソッドにあります。矢印関数を使用しているため、thisはクリックされた要素ではなくクラスを参照します。

矢印機能を通常の機能に変更します。 Josanの答えに加えて

Answer 2

、あなたは、矢印の機能を使用し続けるこのようにそれを使用したい場合：より多くの議論については

class List { 
    constructor($el) { 
     this.$el = $el; 
     this.attachHandlers(); 
    } 

    attachHandlers() { 
     this.$el.on('click', 'li', (e) => { 
      var data = $(e.currentTarget).attr('data-id'); 
      console.log(data); 
     }); 
    } 
} 

、this threadを参照してください。

Answer 3

だけのjQueryを使用して、より簡便な：

$(".list-item").on('click', function() { 
 
    console.log($(this).data('id')); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="list-item" data-id="item-1">Click me</li> 
 
    <li class="list-item" data-id="item-2">Click me</li> 
 
    <li class="list-item" data-id="item-3">Click me</li> 
 
</ul>