Question

使用jQuery时，缓存非常重要，似乎我忘记了相关的主体。当我缓存某些内容时，如何在函数on()中重用它？

示例：

var paginationDemo = $("#pagination-demo");
paginationDemo.on('click', function() {
  var index = $('#pagination-demo').find('.active > a')[0].innerHTML;
  ...
});

正如你在这里看到的，我再次调用jQuery找到id，对我感到羞耻！有没有办法用this来做？

var index = this.find('.active > a')[0].innerHTML;

或：

var index = $(this).find('.active > a')[0].innerHTML;

但我不确定this在on()的身体内会有什么。{1}}。这样做的正确方法是什么？

Answer 1

您的第二个选项可行：

var index = $(this).find('.active > a')[0].innerHTML;

Answer 2

根据我的理解，您希望使用您在通过on注册的回调中创建的jquery对象。

来自official docs：

除了事件对象，事件处理函数也有访问处理程序通过绑定到的DOM元素关键字this。将DOM元素转换为我们可以的jQuery对象使用jQuery方法，我们只需$( this )

但是在这种情况下你也必须再次构造jQuery对象。不像使用选择器来查找元素那么昂贵，但也没有。

问题的一个解决方案可能是使用event.data属性

var paginationDemo = $("#pagination-demo");
paginationDemo.on('click',{ cachedElement:paginationDemo},function(event) {
  var index = event.data.cachedElement.find('.active > a')[0].innerHTML;
  ...
});

通过这种方式，您可以重用原始的jQuery对象，并从缓存中获得所需的内容。

更新：

在传递给on的回调中，关键字this指的是底层DOM对象。当我们使用这个成语：$(this)时，我们正在构建一个新的jQuery对象。但是它与paginationDemo变量中存储的jQuery对象不同。换句话说，两个jQuery对象都将作用于相同的 DOM元素。但是他们的引用是不同的

event.data.cachedElement === $(this)
>false

Answer 3

要使用变量缓存，只需重用变量＆＃34; paginationDemo＆＃34; ＆＃39;再次进入＆＃39;。在这种情况下，第二种方法也可以正常工作。

var index = $(this).find('.active > a')[0].innerHTML;

因为＆＃39;这个＆＃39;仍然保存对DOM对象的引用。

但是这种方法在嵌套函数或匿名函数（＆＃39;未命名的＆＃39;函数）中失去了它的有效性。因此，您可以保存对此变量的引用以使其工作（自我方法）。或直接使用缓存变量（paginationDemo）。例如下面：

 var paginationDemo = $("#paginationDemo");
    paginationDemo.on('click', function(e) {
          var self =this;      // saving reference to this
          console.log(this);     // refers to DOM object paginationDemo

          var index = $(this).find('.active > a')[0].innerHTML; 
                                 //will work
          var index = paginationDemo.find('.active > a')[0].innerHTML; 
                                    //will work, this is caching approach

         (function (){
              //inside anonymous fun, this changed now
            console.log(this);      // this refers to "window" object now!
            var index = $(this).find('.active > a')[0].innerHTML; //won't work

            var index = $(self).find('.active > a')[0].innerHTML; 
                               //works !! lexical scope variable self used    

            paginationDemo.find('.to-be-found').text('FOUND');
                                 //works too

       })();
    });

这是一个如何工作的链接： this - JavaScript | MDN

使用jQuery时正确的缓存方式

3 个答案: