jQuery関数で 'this'を理解して使用する

Question

私はさまざまな要素に適用したい、あるいはさまざまなコンテキストを作成するさまざまなセレクタに適用したい機能を持っています。 getClass関数内で$('#themes')セレクタを指定する代わりに、thisを使用するために、以下の関数を変更するにはどうすればよいですか？

コード：

$('#themes').change(function(e) { 
    getClass(this, e); 
}); 

function getClass() { 
    var classToAdd = $('#themes').find('option[value]:selected').map(function() { 
    return this.value; 
    }).get().join(' '); 
    var allClassess = $('#themes').find('option[value]').map(function() { 
    return this.value ? this.value : null; 
    }).get().join(' '); 
    $('#result').removeClass(allClassess).addClass(classToAdd); 
} 

はfiddle hereを参照してください。

Answer 1

イベントは、あなたが探しているまさにそれだcurrentTarget財産、およびそれにthisを渡す必要はありません...実際には、ちょうどこのように結合再構成しています

$('#themes').on('change', getClass); 

function getClass (event) { 
    var themes = $(event.currentTarget); 
    var classToAdd = themes.find('option[value]:selected').map(function() { 
    return this.value; 
    }).get().join(' '); 

    var allClassess = themes.find('option[value]').map(function() { 
    return this.value ? this.value : null; 
    }).get().join(' '); 

    $('#result').removeClass(allClassess).addClass(classToAdd); 
} 

Answer 2

thisの代わりに$(this)を使用してください。
そのように、同じjQueryセレクターを定義する必要はありません。

Answer 3

「これを'演算子はスコープと現在のオブジェクトが何を処理しているかと関係があります。現在オブジェクトが選択されていない場合、 'this'は 'ドキュメント'（ウェブページ全体とも呼ばれます）を参照します。他のオプションは、メソッドやjQueryプラグインを使用することであるが、その構文は少しです

('#themes').change(function(event) { 
    getClass(this, event); 
}); 

function getClass(elem, e) { //if you pass args into a func, you need to declare them in the prototype 
    //elem now represents whatever object you passed it (in this case 'this') 
    var classToAdd = elem.find('option[value]:selected').map(function() { 
    return this.value; 
    }).get().join(' '); 
    var allClassess = elem.find('option[value]').map(function() { 
    return this.value ? this.value : null; 
    }).get().join(' '); 
    $('#result').removeClass(allClassess).addClass(classToAdd); 
} 

：あなたはそれはあなたがやっていることを達成するために非常に簡単な方法で、渡されたセレクタに新しい変数を割り当てることができますこの機能よりも格闘しているメソッドとプラグインで前進する前に、この関数がオブジェクト内の変数をどのように取っているかを理解する。

こちらがお役に立てば幸いです。

Answer 4

$(this)とthis

$(this)の違いを理解することが重要である - あなたは任意のjQueryの機能

thisを実行したいときにいつでも$(this)を使用しますので、thisを含むjQueryオブジェクトである - Javascriptのですあなたが使用したい任意のJavascript関数であれば、thisで使用する必要があります。

さらに、thisを使用すると、その機能はどのように呼び出されるかによって異なります。 getClass関数にthisとeを渡す必要はありません。 $('#themes').change(getClass);は#themesが変更されたときにその関数を実行し、getClass関数のthisキーワードは#themesという選択オブジェクトになりますが、$(this)はthisを含むjQueryオブジェクトになります。

代わりに$(this).find(':selected')を使用すればよいはずです。しかし、覚えておいて、あなたのmap機能の中にあなたthisキーワードを使用すると、イベントリスナー、 `現在の要素にthis`ポイントはイベントが発生して（$(this).find(':selected')別名）