Question

我有一个实例，我需要将this的值转移到另一个函数以供使用。显而易见的解决方案是使用全局变量，但我听说这不是好的做法。这是我的代码：

$('.title').each(function(){
   $(this).click(function(){
       titleThis = this;
   });  
});

$('.post-footer').click(function(){
    $(titleThis).css('background','red');
});

JsFiddle

如何在不使用全局变量的情况下执行此操作？

旁注：我不能这样做：

$('.title').each(function(){
       $(this).click(function(){
           var titleThis = this;
           $('.post-footer').click(function(){
               $(titleThis).css('background','red');
           });
       });  
    });

因为我在此示例中使用的插件代替.click()（JQuery Waypoints）在我尝试堆叠它时会抛出错误（不确定原因）。当我在第一个例子中使用全局变量时，它工作正常，我想尽可能避免使用全局变量。

编辑：由于我的示例代码似乎存在一些问题，某些解决方案无法在我的实际代码中运行，这是我的实际代码块：

    $('.title').each(function() {
            //creating the waypoint
          $(this).waypoint(function(direction) {
//declaring global variable as this
              titleThis = this;
              //if below waypoint, do animation
              if (direction === "down"){
                  //fix the title
                  $(this.element).addClass('titleFixed');
                  //slide right
                  $(this.element).animate({left:'10%'},250,function(){
                      //slide title decoration right
                      $(this).next().animate({left:'0'},50);
                  });
                  //if above waypoint, undo animation
              }else{
                  //unfix the title
                  $(this.element).removeClass('titleFixed');
                  //animate left
                  $(this.element).animate({left:'-3.5%'},240,function(){
                      //animate title direction left
                    $(this).next().animate({left:'-3.5%'},150);
                  });
              }
          });
        });
      $('.post-footer').waypoint(function() {
         $(titleThis.element).css('background','red');
      });

如果我尝试将第二个.waypoint函数嵌套在第一个函数中，我会收到错误。

Answer 1

您不需要全局变量。只需将代码包装在一个自动执行的函数中：

(function(){
    var titleThis;
    $('.title').click(function(){
        titleThis = this;
    });
    $('.post-footer').click(function(){
        $(titleThis).css('background','red');
    });
})();
// `titleThis` is not defined here.

Answer 2

在必要时使用全局变量没有任何问题。当将值（或引用）作为函数参数传递更合适时，过度使用全局变量是错误的。这不是你的情况，因为$（。post-footer）上的点击处理程序是独立触发的，并且不与$（。title）的点击处理程序共享变量范围

目前尚不清楚您尝试使用代码实现的目标。但是使用全局变量来标记最后点击哪个div是完全没问题的。如果这就是你要拍摄的东西。

我建议首先声明并定义全局变量：

var titleThis = null;

Answer 3

您也可以尝试使用css并添加.selected类来定位。

$('.title').each(function(){
   $(this).click(function(){
       $('.title.selected').removeClass('selected'); // Prevents having multiples selected.
       $(this).addClass('selected')
   });  
});

$('.post-footer').click(function(){
    $('.title').css('background', ''); // Undo css on previous titles
    $('.title.selected').css('background','red');
});

有没有办法将'this'转移到另一个函数？

3 个答案: