간단한 ES6의 클릭 핸들러

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

이 오래된 운동이며,이 솔루션은 자바 스크립트의 오래된 버전입니다에 $ (이) 문제가 있습니다. 4 단계와 5 단계를 ES6으로 업데이트하려고하는데, $ (여기)가 작동하지 않습니다. 누구나 클릭 핸들러를 수정하는 방법을 설명하고 $ (이)가 ES5에서 ES6으로 변경되는 방법을 설명 할 수 있습니까? 우리는 새로 만든 버튼을 올바른 문자 데이터가있는 backround 냉장고 이미지에 표시하려고합니다. 또한 '데이터 렛'은 무엇입니까?

Answer 1

$ (this)로 인해 jquery envent 핸들러에서 화살표 기능을 사용할 수없고 화살표 기능이 새로운 기능이 아닙니다. function 키워드 id가 오래되었습니다! 기능()을 사용하지 말라.

You Can refer to this blog post for more info