현재 jQuery와 ES6을 사용하여 간단한 Read Me 토글을 수행하고 있습니다. 여기 내 코드가 있으며 페이지에서 더 많은 것을 읽을 수 있습니다.
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')직접 사용 하면 작동 하는 이유가 궁금 합니다. 스코프가 좀 헷갈리는 것 같아요.
this(따라서 암시 적으로 $(this))는 .read-more-toggle클릭 이벤트를 발생시킨 단일 요소를 나타냅니다 .
$('.read-more-toggle').read-more-toggle현재 문서에서 찾은 모든 요소를 나타 냅니다 .
따라서 전자는 하나의 요소에만 영향을 미치고 후자는 모든 요소에 영향을 미칩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다