ES6和jQuery选择器在点击函数中的作用域

我目前正在使用jQuery和ES6做一个简单的Read Me切换。这是我的代码，它可以在多个页面上阅读更多内容。ES6和jQuery选择器在点击函数中的作用域

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')直接它的工作原理。我想我对范围有点困惑。

来源

2016-06-10 Jacklyn N

在这里使用'class'似乎没有任何优势。它没有任何方法，而且你甚至没有使用'.toggle'字段 - 所以如果你不需要存储实例，只是不要创建它们，并使用一个简单的函数initReadMore（cfg）'而不是该构造函数。 – Bergi

this（因此暗示，$(this)）是指引发点击事件的单个.read-more-toggle元素。

$('.read-more-toggle')指当前文档中找到的所有.read-more-toggle元素。

因此，前者只影响一个元素，而后者影响所有元素。

来源

2016-06-10 20:29:19

那么，我想要在var中存储read more选择器，因此每次都不需要访问dom，而是引用dom中的所有read-more-toggle元素 –

ES6和jQuery选择器在点击函数中的作用域

回答

相关问题