Javascript 使用jQuery'；s$（this）在函数内部抛出一个错误

可能重复：

我正在编写一个Javascript/jQuery函数（尚未重构），但使用

$（this）

时出现了一个错误。这有点难以解释，因此我将添加代码，希望它会变得更加清晰：

var accordion = 'div.accordionContent';
var accordButton = 'div.accordionButton';
var accordClosedArrow = 'url(/public/img/accordion-closed-arrow-';
var accordOpenArrow = 'url(/public/img/accordion-open-arrow-';
$(accordion).hide();
var accordFunc = function(arrowColor){
    var img;
    if ($(this).next(accordion).is(':visible')) {
        img = accordClosedArrow + arrowColor + '.png)';
    } 
    else {
        img = accordOpenArrow + arrowColor + '.png)';
    }

    // these lines throw errors because of $(this)
    $(this).css({backgroundImage:img}).next().slideToggle('slow').siblings(accordion)
        .slideUp();
    $(this).siblings()
        .css({backgroundImage:accordClosedArrow + arrowColor + '.png)' + 'no-repeat'});
    };

    $(accordButton).live('click',function(){
        accordFunc('blue');
    });

    $(accordButton + 'B').live('click',function(){
        accordFunc('orange');
    });

不确定为什么传递

$（此）

会导致Chrome控制台抛出错误：

未捕获类型错误：无法读取未定义的属性“firstChild”

替换

accorfunc（'blue'）与
函数调用（此为“蓝色”）
并对该函数的另一个调用执行同样的操作

调用另一个函数时，
此
值不会保留，因此在
accorfunc
中，它指向窗口对象或null（如果严格模式处于活动状态）。另一个选项是将
this
作为普通参数传递，并将函数定义更改为
function accorfunc（elem，arrowColor）
，并在该函数中使用
elem
而不是
this
。
替换
accorfunc（'blue'）与
函数调用（此为“蓝色”）
并对该函数的另一个调用执行同样的操作

调用另一个函数时，
此
值不会保留，因此在
accorfunc
中，它指向窗口对象或null（如果严格模式处于活动状态）。另一个选项是将
this
作为普通参数传递，并将函数定义更改为
function accorfunc（elem，arrowColor）
，并在该函数中使用
elem
而不是
this
。
在JS中的方法中调用函数时，
此
的范围更改回窗口。这是一种奇怪的行为，但不幸的是，这就是它的工作方式！尝试将所需的上下文作为参数传递给方法，如下所示：

        var accordFunc = function(ctx, arrowColor){
          var img;
          if ($(ctx).next(accordion).is(':visible')) {
                  img = accordClosedArrow + arrowColor + '.png)';
          } 
          else {
              img = accordOpenArrow + arrowColor + '.png)';
          }

          // these lines throw errors because of $(this)    
          $(ctx).css({backgroundImage:img}).next().slideToggle('slow').siblings(accordion).slideUp();
          $(ctx).siblings().css({backgroundImage:accordClosedArrow + arrowColor + '.png)'     + 'no-repeat'});
        };

        $(accordButton).live('click',function(){
            accordFunc(this, 'blue');
        });

在JS中调用方法中的函数时，
this
的作用域会变回窗口。这是一种奇怪的行为，但不幸的是，这就是它的工作方式！尝试将所需的上下文作为参数传递给方法，如下所示：

        var accordFunc = function(ctx, arrowColor){
          var img;
          if ($(ctx).next(accordion).is(':visible')) {
                  img = accordClosedArrow + arrowColor + '.png)';
          } 
          else {
              img = accordOpenArrow + arrowColor + '.png)';
          }

          // these lines throw errors because of $(this)    
          $(ctx).css({backgroundImage:img}).next().slideToggle('slow').siblings(accordion).slideUp();
          $(ctx).siblings().css({backgroundImage:accordClosedArrow + arrowColor + '.png)'     + 'no-repeat'});
        };

        $(accordButton).live('click',function(){
            accordFunc(this, 'blue');
        });

一个选项是使accorfunc返回将被绑定的函数，并对颜色使用闭包：

var accordFunc = function(arrowColor){
    return function(){
        var img;
        if ($(this).next(accordion).is(':visible')) {
            img = accordClosedArrow + arrowColor + '.png)';
        } 
        else {
            img = accordOpenArrow + arrowColor + '.png)';
        }

        // these lines throw errors because of $(this)
        $(this).css({backgroundImage:img}).next().slideToggle('slow').siblings(accordion)
        .slideUp();
        $(this).siblings()
            .css({backgroundImage:accordClosedArrow + arrowColor + '.png)' + 'no-repeat'});
    }
};

然后打电话：

$(accordButton + 'B').live('click', accordFunc('orange'));

一个选项是使accorfunc返回将被绑定的函数，并对颜色使用闭包：

var accordFunc = function(arrowColor){
    return function(){
        var img;
        if ($(this).next(accordion).is(':visible')) {
            img = accordClosedArrow + arrowColor + '.png)';
        } 
        else {
            img = accordOpenArrow + arrowColor + '.png)';
        }

        // these lines throw errors because of $(this)
        $(this).css({backgroundImage:img}).next().slideToggle('slow').siblings(accordion)
        .slideUp();
        $(this).siblings()
            .css({backgroundImage:accordClosedArrow + arrowColor + '.png)' + 'no-repeat'});
    }
};

然后打电话：

$(accordButton + 'B').live('click', accordFunc('orange'));

太好了，谢谢，我有点傻。为什么我需要.call？请看上面的文档-它调用一个函数，其
this
绑定到第一个参数。太好了，谢谢，我有点像JS noob。为什么我需要.call？请看上面的文档-它调用一个函数，其
this
绑定到第一个参数。亲爱的上帝，将
$（this）
包装一次并重用它。亲爱的上帝，将
$（this）
包装一次并重用它。