Nicht in der Lage Daten-ID zu finden, wenn Element

Question

Entschuldigung im Voraus Ich fühle mich, als ob dies eine sehr einfache Lösung ist und ich bin in der Mitte eines schweren Hirn Furz. Ich versuche einfach, die Daten-ID eines Elements, auf das ich klicke, mit ES6-Syntax zu erfassen, aber egal, wie ich es ausführe, werde ich undefiniert.

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(); 

Ive den Code unten so weit wie möglich vereinfacht, jemand sehen, was ich hier falsch mache?

Answer 1

Das Problem ist in Ihrer attachHandlers Methode. Da Sie eine Pfeilfunktion verwenden, bezieht sich this auf die Klasse und nicht auf das Element, auf das geklickt wurde.

Ändern Sie die Pfeilfunktion in eine normale Funktion.

Answer 2

Neben Josan Antwort, wenn Sie auf den Pfeil-Funktion fortsetzen möchten, verwenden Sie es wie folgt aus:

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

Weitere Diskussionen zu this thread beziehen.

Answer 3

einfacher und leichter von nur JQuery mit:

$(".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>