jQuery $（this）関数内で動作しない

Question

私はこの単純な関数をいくつかのhtmlをコピーし、別のdivに配置します。 私は関数のコードをclickイベントに入れてもうまく動作しますが、複数の場所で使用する関数に移動すると機能しません。 これはなぜですか？

I console.log（$（this））;関数ではウィンドウ要素を返します。 http://codepen.io/ashconnolly/pen/ebe7a5a45f2c5bbe58734411b03e180e

私は別の方法で$（this）を参照する必要があります - ？ここcodepen

function addHTMLtoComponent() { 
     var wrapper = $(this).closest(".wrapper"); 
     var component = $(wrapper).find(".component"); 
     var componentCodeHolder = $(wrapper).find('.target'); 

     $(componentCodeHolder).text(component.html()) 
     //console.log($(this)); 
} 

$(".js_show_html").click(function() { 
    addHTMLtoComponent(); 
}); 

Answer 1

あなたは関数を呼び出したため、手動では、したがって、それはウィンドウオブジェクトを使用するように戻す、「この」文脈を知りません。

$(".js_show_html").click(function() { 
    addHTMLtoComponent(); 
}); 

// Change to this 

$(".js_show_html").click(function() { 
    addHTMLtoComponent.call(this); 
}); 

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Answer 2

thisは、click()のイベントはクリックされた要素です。関数の文脈では、addHTMLtoComponentthisは、もはやクリックされた要素への参照ではありません。

クリックしたオブジェクトを関数に渡して、オブジェクト参照を維持してみてください。

---

function addHTMLtoComponent ($obj) { 
    var $wrapper = $obj.closest(".wrapper"); 
    var $component = $wrapper.find(".component"); 
    var $componentCodeHolder = $wrapper.find('.target'); 
    $componentCodeHolder.text($component.html()); 
} 

$(".js_show_html").click(function() { 
    addHTMLtoComponent($(this)); 
}); 

Answer 3

あなたはこの関数のパラメータとしての要素を渡す必要があります。 例：他の回答について

<div onclick="addHTMLtoComponent ($(this))"></div> 

Answer 4

、私は最も簡単なものを置く必要があります：あなたが考えることができ

$(".js_show_html").click(addHTMLtoComponent); 

Answer 5

ことの一つはaddHTMLtoComponent()は、jQueryの機能自体に作ることができるということです。

$.fn.addHTMLtoComponent = function() { 
    return this.each(function() { 
     var wrapper = $(this).closest(".wrapper"); 
     var component = $(wrapper).find(".component"); 
     var componentCodeHolder = $(wrapper).find('.target'); 

     componentCodeHolder.text(component.html()) 
    }); 
} 

他のjQueryメソッドと同じように呼び出すことができます。

$(".js_show_html").click(function() { 
    $(this).addHTMLtoComponent(); 
}); 

jQueryメソッド内のthisの値はjQueryオブジェクト自体であるため、$()で再ラップする必要はありません。規約（およびそれが意味をなされるとき）によって、jQueryメソッドはルートオブジェクトによって参照されるすべての要素で動作し、さらにチェーンされた操作のためにそのオブジェクトを返します。それが外側のreturn this.each()の構造です。

.each()コールバックの中には、典型的なjQueryコールバック状況があります。thisが外側のjQueryオブジェクトの各メンバーに順番に設定されています。

Answer 6

特殊キーワードthisは、関数を単独で呼び出すと、windowオブジェクト（これはあなたが観察したものです）です。``関数addHTMLtoComponent（$この）{}、：あなたが必要とする動作については、単に適切なコンテキストをロードする関数にパラメータを追加します。

function addHTMLtoComponent(context) { 
    var wrapper = $(context).closest(".wrapper"); 
    var component = $(wrapper).find(".component"); 
    var componentCodeHolder = $(wrapper).find('.target'); 

    $(componentCodeHolder).text(component.html()) 
    //console.log($(context)); 
} 

$(".js_show_html").click(function() { 
    addHTMLtoComponent(this); 
});