javascript - 在简单的 ES6 点击处理程序中使用 $(this) 时遇到问题

Question

这个问题已经有答案了:

Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (5 个回答)

What does "this" refer to in arrow functions in ES6? (10 个回答)

已关闭 5 年前。

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

这是一个古老的练习，解决方案是使用过时的 JavaScript 版本。我正在尝试将步骤 4 和 5 更新为 ES6，但 $(this) 在这里不起作用。谁能向我解释一下如何修复点击处理程序以及 $(this) 如何从 ES5 更改为 ES6？我们希望新创建的按钮能够以正确的字母数据出现在背景冰箱图像上。另外，什么是“data-let”？

Answer 1

由于 $(this) ，您不能将箭头函数与 jquery 事件处理程序一起使用，并且箭头函数不是新函数。函数关键字 id 还没有过时!使用 function() 代替。

You Can refer to this blog post for more info