클릭 기능에 대한 ES6 및 jQuery 선택기의 범위

Question

저는 현재 jQuery와 ES6을 사용하여 간단한 읽어보기 토글을 수행하고 있습니다. 여기에 내 코드가 있으며 둘 이상의 페이지에서 더 많은 내용을 볼 수 있습니다. 궁금

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; 

는 왜 this.toggle를 사용할 때 그것은 단지 read-more의 한 인스턴스에서가 아닌 다른 인스턴스의 작동하는지 그 것이다,하지만 난 $('.read-more-toggle')를 사용할 때 직접 작동합니다. 나는 그 범위에 대해 다소 혼란 스럽다고 생각한다.

Answer 1

this (따라서 의미 : $(this))은 클릭 이벤트를 발생시킨 하나의 .read-more-toggle 요소를 나타냅니다.

$('.read-more-toggle')은 현재 문서 내에있는 모든 .read-more-toggle 요소를 나타냅니다.

전자는 하나의 요소에만 영향을 미치지 만 후자는 모든 요소에 영향을줍니다.