Probleme mit $ (this) in einfachen ES6 Click-Handler

Question

const letters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","_"]; 

$.each(letters, (number, letter) => { 
    let b = $('<button>'); 
    b.addClass('letter-button letter letter-button-color') 
    .attr('data-let', letter) 
    .text(letter); 
    $('#buttons').append(b); 
}); 

$('.letter-button').on('click',() => { 
    let fridgeMagnet = $('<div>'); 
    fridgeMagnet.addClass('letter fridge-color') 
    .text($(this).data('let')); 
    console.log(this); 
    $('#display').append(fridgeMagnet); 
}); 

Dies ist eine alte Übung und die Lösung mit der veralteten Version von JavaScript ist. Ich versuche, Schritt 4 und 5 zu ES6 zu aktualisieren, aber $ (this) funktioniert hier nicht. Kann mir jemand erklären, wie man den Click-Handler repariert und wie sich $ (this) von ES5 zu ES6 ändert? Wir möchten, dass die neu erstellten Schaltflächen auf dem Backround-Kühlschrankbild mit den korrekten Briefdaten erscheinen. Was ist "Daten"?

Answer 1

Sie können Pfeilfunktion mit jquery envent Handlern wegen $ (this) nicht verwenden, und Pfeilfunktion ist nicht die neue Funktion. Die Funktion Keyword-ID ist nicht veraltet! Benutze Funktion() unstead.

You Can refer to this blog post for more info