jquery delegate関数内で "this"キーワードを使用するには？

私はdelegateを使ってmouseoverで隠しキャラクターを表示しようとしています。jquery delegate関数内で "this"キーワードを使用するには？

これはサンプルコードです。アラートは正常に動作しています。しかし隠されたaは表示されません。

<html> 
<body> 
<script type="text/javascript" src="jquery.js"></script> 

    <script type='text/javascript'> 
    $(document).ready(function(){ 
     $("a.del").hide(); 
     this.showHidden = function(event){ 
     if (event.type == 'mouseover') { 
      alert("X"); 
     $(this).closest(".del").show(); 
     } 
     }; 
     $("#holder").delegate("div.inner", "hover", this.showHidden); 
    }); 
    </script> 
    <div id='holder'> 
     <div class='inner' style="background-color:red">a 
      <a class='del'>X</a></div> 
     <div class='inner' style="background-color:red">a 
      <a class='del'>X</a></div> 
     <div class='inner' style="background-color:red">a 
      <a class='del'>X</a></div> 
     <div class='inner' style="background-color:red">a 
      <a class='del'>X</a></div> 
    </div> 
</body> 
</html>

任意の提案、

ありがとう！

出典

2010-12-30 Anonymous

あなたが関数を定義している場合、あなたはthis.showHidden = function(event){でやっているように、その前にこれを追加する必要はありません。あなたのコードでは、関数を代理人に匿名関数として直接追加することもできますし、関数を外部に定義して参照することもできます。関数内の$(this)は、デリゲートがトリガーされたオブジェクトを表します。この場合、div.innerにはhoveredというマウスがあります。次に、のdiv内のすべての要素をクラス.delで表示しようとしています。 childrenなどの他の機能を使用することもできます。ここで

は、作業コードは、私が代わりに最も近いを使用して、あなたはそれを絞り込むと、以下のようなとして子供を使用することができると思うjsbin

$("a.del").hide(); 
     $("#holder").delegate("div.inner", "hover", function(event){ 
      if (event.type == 'mouseover') { 
      alert("X"); 
      $(this).find(".del").show(); 
      } 
     });

出典

2010-12-30 14:20:28

.closest()を使用しないでください。それはマッチを見つけるために木の上に上がります。 div内のアンカーを見つけるには、$('.del',this)または$(this).children('.del')のいずれかを使用する必要があります。

.children() Help

出典

2010-12-30 14:17:54

あなたがその類推を使用している場合は、実際にはツリーの下にあります。木は根元が上部にない。ツリーは、階層の非常に良いアナロジーではありません。 – Guffa

CoScツリーのデータ構造は常に最上位にルートが表示されます... http：//en.wikipedia。org/wiki/Tree_（data_structure） – jxpx777

です。

http://jsfiddle.net/47Vjy/

しかし、私は、なぜuがしかし、デリゲートを使用しようとしている非常にわからないんだけど？あなたのhtmlを上書きするajaxコードがあり、javascriptイベントも更新する必要があるときは、私の理解からそれを使用していますか？

出典

2010-12-30 14:32:17 melaos

はい、そうです。 liは動的に更新されます。しかし、私はマウスを取った後、Xは隠れると思った。しかし、それは再び隠れていないようです。 –

showHiddenを関数として定義するビットは、おそらくあなたが望むものではないグローバルを作成しています。その理由は、call()関数を使用して呼び出され、thisがドキュメントに設定されているためです。私はあなたが欲しいと思うのは、ローカルvar showHiddenです。次に、デリゲートメソッドを設定するときに作成されたクロージャのため、これが利用できます。内のshowHiddenの本体は、代理人がapply関数を使用し、thisを設定するため、一致する要素に正しく設定されます。あなたのコールバックは非常に短いので、無名関数としてデリゲートするために呼び出すだけです。

プラス、あなたはいくつかの古いブラウザでは、この機能をサポートしていませんが、これはあなたがさえない行くための理想的な方法ですwith CSS!

div#holder a.del { 
    display:none; 
} 
div#holder:hover a.del { 
    display:inline; 
}

をやりたいことができますので、これはすべての議論の余地がありますJSを全く使わなければなりません。

出典

2010-12-30 14:33:24 jxpx777

答えて

関連する問題