0

重複の可能性:
$(this) を他の関数に渡す jquery

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');
    });

渡す$(this)と Chrome コンソールがエラーをスローする理由がわかりません。

キャッチされていない TypeError: 未定義のプロパティ 'firstChild' を読み取ることができません

4

3 に答える 3

5

に置き換えaccordFunc('blue');てaccordFunc.call(this, 'blue');、その関数への他の呼び出しについても同様に行います。

this別の関数を呼び出した場合、値は保持されないため、その内部はaccordFuncウィンドウ オブジェクトまたは null (厳密モードがアクティブな場合) を指します。別のオプションは、通常の引数として渡しthis、関数定義を変更して、その関数内の代わりにfunction accordFunc(elem, arrowColor)使用することです。elemthis

于 2012-11-09T16:08:55.803 に答える
1

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');
        });
于 2012-11-09T16:12:25.190 に答える
0

オプションは、バインドされる関数を返すようにaccordFuncを作成し、色へのクロージャを使用することです:

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'));
于 2012-11-09T16:16:20.117 に答える