Jquery：同じID番号の同じ複数のdivの上に隠れて表示しようとしています

Question

<a id="thumblink-10">のようなdivを表示しようとすると、ホバー上の別のdivを表示したり非表示にしたりできます。

jQuery(document).ready(function() { 

    jQuery(document).find("a[id^='thumblink-']").live('hover', function(){ 
    var num = this.id.split('-')[1]; 

      jQuery('#thumb-hover-' + num).show(); 

    }, function(){ 
     //var num = this.id.split('-')[1]; 
      jQuery('#thumb-hover-' + this.num).hide(); 
    }); 



}); 

おかげ

Answer 1

これはあなたのために働く必要があります。

jQuery("a[id^='thumblink-']").live('hover', function(){ 
    var num = this.id.split('-')[1]; 
    jQuery('#thumb-hover-' + num).toggle(); 
}); 

は見つける使用しないように、最初のセレクタを修正しましたホバリングのために単一の機能を供給し、トグル機能を使用してコンテンツを表示/非表示にする必要があります。

http://jsfiddle.net/Zy2Ny/

しかし、私は実際にそれを行うだろう方法は、データが（その後、クラスの代わりに1にセレクタを変更することができます）と、このように切り替えるには正しいのdivを見つけるために、それらを使用して、あなたのリンクに属性を追加することです。

JS

jQuery("a.thumblink").live('hover', function(){ 
    var num = $(this).data('contentid'); 
    jQuery('#thumb-hover-' + num).toggle(); 
}); 

HTML

<a class="thumblink" data-contentid="10">Hover</a> 
<div id="thumb-hover-10" style="display: none;">Content</div> 

http://jsfiddle.net/Zy2Ny/1/

Answer 2

あなたは本当にfindのようなトラバーサル方法を行い、その後、liveを使用することはできません。あなたは標準的な選択肢を使うべきです。また、liveをhoverと一緒に使用することはできません。

$("a[id^='thumblink-']").live('hover', function(){ // simple selector 

ベターまだdelegateやイベントとハンドラのマップを使用することです：

$(document).delegate('a[id^="thumblink-"]', { 
    mouseenter: function() { 

    }, 
    mouseleave: function() { 

    } 
}); 

Answer 3

私は、残念ながらそれをテストすることができていないが、私は次のように動作するはずと信じて：

var id = 10; 
$('#thumblink-' + id).hover(function(id) { 
     return function() { 
      $('#thumb-hover-' + id).show(); 
     }; 
    }(id), 
    function(id) { 
     return function() { 
      $('#thumb-hover-' + id).hide(); 
     }; 
    }(id) 
);