Warum funktioniert meine Pfeilfunktion beim Abrufen eines bestimmten Elements nicht?

Question

Ich versuche, einen Pfeil Funktion zu verwenden, und ich bin immer einen Fehler, wenn ich eine Variable

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

wenn ich cardColor von fontColor undefined ich log Konsole zuweisen versuchen, wie ich

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

tue

aber wenn ich es die reguläre Art und Weise

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

dann funktioniert alles einwandfrei.

Was fehlt mir?

Answer 1

Arrow functions wird seine lexical scope automatisch in es binden, so in Ihrem Fall wird die this innerhalb der Event-Handler nicht die Elemente des Event-Handler zeigen.

Verwendung von arrow functions Ihre machen event binding knapp unter wie

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

}.bind(this)); 

hier während Ereignisbindung, Pfeil Funktionen ungeeignet ist. Die beste Option ist, mit normalen anonymen Funktionen zu gehen.

Beachten Sie auch, dass Sie den durch die Pfeilfunktion gebundenen Bereich in keiner Weise außer Kraft setzen können.