質問: この投稿は前回の続きになります。 【jQuery】labelの中の文字列だけを変更したい 【jQuery】引数にthisを渡せない 今回以下のようなコードを書いて、「緑のボックスをクリックすると、ピンクのボックスの文字が変わり、またラベルの中のテキストノードだけを変更する」処理を実装していました。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0dc154aef41eee5326429a3d022876d7.png) ``` りんご いちご ぶどう りんご ``` ただ「直接書いたコード」だと何ら問題ないのですが、「this」を引数に渡すといろいろと処理が変わっていしまいます。 そこでいくつか質問があります。 1つ目 **そもそも関数の引数に「this」を渡したい時 直接書いたコードのまま関数に切り出せる場合と切り出せない場合の違いはどのようなときか? 「切り出せない場合」とは、「直接書いたコードを一部変更しなくてはいけない」場合のことです。 今回の場合は、thisをそのまま使うやり方はダメで、function(i,e)のようにしてeオブジェクトを使わなければいけない理由は何でしょうか?** 2つ目 **function(i,e)の「i」を消すと、spanタグやinputタグも消えてしまうのはなぜでしょうか? 「i」について調べて、i番目などを指すときに使うものだと思っています。 またこのコードで「i」を使っていないのに影響していることが不思議です。** 3つ目 **function(i,e)の「i」を消し、「=== e.TEXT_NODE })」のときと「=== Node.TEXT_NODE })」のときで処理の内容が変わるのはなぜでしょうか?** **「=== e.TEXT_NODE })」のとき ・spanタグやinputタグも消えてしまう** **「=== Node.TEXT_NODE })」のとき ・removeされず、文字がどんどんappendされてしまう** このどれかだけでもいいので質問に答えていただけると助かります。
回答: * 1番目 filterのfunction内のthisはfilterでループされる要素を示します。 なので、関数内のfilterの中を`_this`から`this`に変えるとちゃんと動きます。 公式でも、 > > A function used as a test for each element in the set. this is the current DOM element. > > functionはそのセットの中のエレメントの各々をテストするために使います。thisはそのカレントDOMエレメントを示します。 > > > と書かれています。 * 2番目 `function(item,element)`のitemを消したら`function(element)`にはなりません。 `function(item)`になります。引数の名前ではなく順序が大事です。 * 3番目 これも2番目に共通です。 `int.TEXT_NODE`という定数は存在しないので、挙動が変わります。 `Node.TEXT_NODE`と、`funciton(i,e)`の`e.TEXT_NODE`は同じ値を示します。