1

次の関数を使用している場合：

clusters.prototype.shop_iqns_selected_class = function() {
    if(this.viewport_width < 980) {
        $(this.iqns_class).each(function() {
            $(this.iqn).on('click', function() {
                if($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                } else {
                    $(this).addClass('selected');
                }
            });
        });
    }
}

clusters関数にプロパティを追加するために、定義this.viewport_widthした親関数を参照していることはわかっていますthis.viewport_widthが、jQueryセレクターを使用している場合$(this)は、関数の親を参照してい$.on()ますか？

4

2 に答える 2

2

thisコード全体ですべてを使用しないでください。次のようなメソッドは$.each、別のリファレンスを提供します。

$(".foo").each(function(index, element){
  /* 'element' is better to use than 'this'
     from here on out. Don't overwrite it. */
});

さらに、$.onイベントオブジェクトを介して同じものを提供します。

$(".foo").on("click", function(event) {
  /* 'event.target' is better to use than
     'this' from here on out. */
});

ネストが深くなると、あいまいさが多すぎて使用できなくなりますthis。もちろん、アクティブに使用されている別の方法は、コールバック内に直接、にthat等しいのエイリアスを作成することです。this

$(".foo").on("click", function(){
  var that = this;
  /* You can now refer to `that` as you nest,
     but be sure not to write over that var. */
});

引数またはイベントオブジェクトでjQueryによって提供される値を使用することを好みます。

于 2012-05-13T08:10:06.023 に答える
2

JavaScriptでは、関数がどのように呼び出されるかthisによって完全に定義されます。jQueryの関数は、各要素値に設定する方法で指定したイテレーター関数を呼び出すため、そのイテレーター関数内では、そのコードの残りの部分で参照されているものを参照しなくなります。eachthisthis

これは、クロージャのコンテキストで変数を使用して簡単に修正できます。

clusters.prototype.shop_iqns_selected_class = function() {
    var self = this; // <=== The variable
    if(this.viewport_width < 980) {
        $(this.iqns_class).each(function() {
            // Do this *once*, you don't want to call $() repeatedly
            var $elm = $(this);

            // v---- using `self` to refer to the instance
            $(self.iqn).on('click', function() {
                // v---- using $elm
                if($elm.hasClass('selected')) {
                    $elm.removeClass('selected');
                } else {
                    $elm.addClass('selected');
                }
            });
        });
    }
}

そこで、各DOM要素を参照するために引き続き使用しましthisたが、イテレーター関数への引数を受け入れることができるため、あいまいさはありません。

clusters.prototype.shop_iqns_selected_class = function() {
    var self = this; // <=== The variable
    if(this.viewport_width < 980) {
        // Accepting the args -----------v -----v
        $(this.iqns_class).each(function(index, elm) {
            // Do this *once*, you don't want to call $() repeatedly
            var $elm = $(elm);

            // v---- using `self` to refer to the instance
            $(self.iqn).on('click', function() {
                // v---- using $elm
                if($elm.hasClass('selected')) {
                    $elm.removeClass('selected');
                } else {
                    $elm.addClass('selected');
                }
            });
        });
    }
}

もっと読む（ JavaScriptでの私のブログへの投稿this） ：

于 2012-05-13T08:14:18.550 に答える