Scope in ES6 und jQuery Selektoren bei Klick-Funktionen

Question

Ich benutze derzeit jQuery und ES6, um eine einfache Read Me Toggle zu tun. Hier ist mein Code und es funktioniert auf mehr als einer mehr auf der Seite.

class ReadMore { 
    constructor(cfg) { 
     this.toggle = $(cfg.el).find('.read-more-toggle'); 
     var toggleText = $('.read-more-toggle').text().split(" ")[0]; 

     $('.read-more-toggle').click(function(e) { 
      e.preventDefault(); 

      if ($(this).hasClass("read-less-toggle")) { 
       $(this).parent().prev(".read-more").hide() 
       $(this).removeClass("read-less-toggle") 
       $(this).text(toggleText + " More"); 
      } else { 
       $(this).parent().prev(".read-more").show(); 
       $(this).text(toggleText + " Less"); 
       $(this).addClass("read-less-toggle"); 
      } 
     }); 
    } 
} 

export default ReadMore; 

ich mich gefragt, warum ist es, dass, wenn ich this.toggle verwenden sie nur auf eine Instanz des read-more funktioniert und nicht von einer anderen Instanz, aber wenn ich $('.read-more-toggle') direkt verwenden, funktioniert es. Ich denke, ich bin ein wenig verwirrt wegen des Umfangs.

Answer 1

this (und damit implizit $(this)) bezieht sich auf das einzelne Element .read-more-toggle, das das Klickereignis ausgelöst hat.

$('.read-more-toggle') bezieht sich auf alle .read-more-toggle Elemente im aktuellen Dokument.

Daher betrifft erstere nur ein Element, während letzteres alle betrifft.