Question

我正在尝试使用箭头功能，当我尝试分配变量

时出现错误

let cardColor;
let fontColor;

let toggleSidebarInfo = () => {
    let colors;
    $('.client-director, .person-link, .card-picture').click((evt) => {
        employeeId = evt.target.id;
      ///// FOCUS ON THIS PART //////
        colors = $(this).hasClass('card-picture') ?
            (cardColor = $(this).next().css('backgroundColor'),
             fontColor = $(this).next().css('color')) :
            (cardColor = $(this).css('backgroundColor'),
             fontColor = $(this).css('color'));
     /////////////////////////
        compareId(employeeId);
    });
};

如果我控制cardColor fontColor的日志{I}我正在做的事情未定义

.click((evt) => { . . . });

但如果我按常规方式这样做

.click(function(evt) { . . . });

然后一切正常。

我错过了什么？

Answer 1

Arrow functions会自动将lexical scope绑定到其中，因此在您的情况下，事件处理程序内的this不会指向事件处理程序的元素。

使用arrow functions会使您的event binding如下所示

$('.client-director, .person-link, .card-picture').click(function(evt){

}.bind(this));

此处在事件绑定期间，使用箭头功能是不合适的。最好的选择是使用普通的匿名函数。

另请注意，您无法覆盖箭头功能限制的范围以任何方式。

为什么我的箭头功能在获取特定元素时不起作用？

1 个答案: