Question

我想在paginate()范围内定义变量。但是，使用this定义的任何变量（例如this.parentlist）在jQuery click方法中都不可用

var paginate = function(elt) {
          //would like to define variables within scope of paginate()
          //however, any variable defined with this (e.g. this.parentlist) is not available within the jQuery click method
          this.parentlist = elt.find('ul');
          var listitems = elt.find('li');
          this.listcount = this.list.find('li').size();
          var showitems = '3';

          this.numberofpages = ~~((this.count / this.show) + 1);

          this.parentlist.after('<ul class="links"></ul>');

          for(i=1;i<=this.numberofpages;i++) {
            $('.links').append('<li><a href="#'+i+'">'+i+'</a></li>')
          };

          //click a link
          $('.links a').click(function() {
            //this.parentlist is not available here
            listitems.hide();
            this.start = listitems.index() * showitems;
            this.end = (this.start + 1) * showitems;
            this.selected = listitems.slice(this.start,this.end).show().addClass('selected');
            console.log(this.selected);
            console.log(this.parentlist);
          }); 
  };

  paginate($('.pages'));

Answer 1

这是因为在click内部事件处理程序this指向附加事件处理程序的锚元素。

您必须在处理程序之外声明一个变量，然后使用它。它仍然在paginate函数范围内。试试这个

var paginate = function(elt) {
          //would like to define variables within scope of paginate()
          //however, any variable defined with this (e.g. this.parentlist) is not available within the jQuery click method
          var parentlist = elt.find('ul');

          ..
          ..
          //click a link
          $('.links a').click(function() {

            //this.parentlist is not available here
            //Use parentlist instead of this.parentlist 
            ..
            ..

          }); 
  };

  paginate($('.pages'));

Answer 2

使用var关键字在当前范围内声明变量。

//For example:
var paginate = function(){

    // create a local variable (local to "paginate function")
    var myvar = 7;

    // create the click handler
    $('.links a').click(function() {

        // access the local variable
        alert(myvar);

    });
}

myvar变量在单击处理程序匿名函数中“可用”，因为它们都在同一范围（分页函数）中声明。

但是，一旦你进入匿名函数，this引用该函数的调用对象而不是它所声明的函数。如果你需要访问this作为“ paginate“caller，然后你可以像其他人一样缓存this变量：var that = this;＆lt; - 这是声明一个局部变量（如上所述）并将其值设置为this。

因此，在您的示例中，您可以像这样更改它：

var paginate = function(elt) {

      var parentlist = elt.find('ul');
      var listitems = elt.find('li');
      var listcount = this.list.find('li').size();
      var showitems = '3';

      var numberofpages = ~~((this.count / this.show) + 1);

      parentlist.after('<ul class="links"></ul>');

      for(i=1;i<=numberofpages;i++) {
        $('.links').append('<li><a href="#'+i+'">'+i+'</a></li>')
      };

      //click a link
      $('.links a').click(function() {
        //this.parentlist is not available here
        listitems.hide();
        this.start = listitems.index() * showitems;
        this.end = (this.start + 1) * showitems;
        this.selected = listitems.slice(this.start,this.end).show().addClass('selected');
        console.log(this.selected);
        console.log(parentlist);
      }); 
};

paginate($('.pages'));

Answer 3

在此特定示例中，最好将parentlist声明为var function paginate（）

然后可以在paginate函数中包含的click函数中访问该变量。

var paginate = function () {
     var parentlist = "some value";

     $('#selector').click(function () {
         alert(parentlist);
     });
};

Answer 4

请勿使用this.为变量添加前缀。 this范围内的paginate()是全局范围（窗口）。

如果您将其定义为var parentlist = elt.find('ul');，则parentlist将在点击处理程序中可用。

在javascript函数范围内定义变量的最佳方法是什么？

4 个答案: