如何使用jquery在鼠標上顯示重複的div？

例如香港專業教育學院有一個像格：如何使用jquery在鼠標上顯示重複的div？

<div class="y1"> 
<img src="i/o.png" /> 
</div>

和

<!-- pre load --> 
<div class="p1" style="display:none"> 
<h5 class="ob">Title</h5> 
<img class="ob" src="i/ob.png" /> 
<small class="ob">Description</small> 
<a href="#" class="oyna">PLAY</a> 
</div>

與這個jQuery

<script type="text/javascript"> 

$("div.y1").hover(
    function() { 
    $('div.p1').slideDown('slow', function() { 
    }); 
    } 
); 
</script>

我的問題是我怎麼能重複12次。我的意思是當我懸停在y1上時，顯示p1，y2 => p2，y3 => p3 ... y12 => p12。我希望你們瞭解我。非常感謝！！！！

來源

2010-10-13 Ali

我我會假設你的y# divs在編號爲container的div中。其次，我將假設你的y# div沒有任何其他類應用於它們。

$('#container').delegate('div[class^=y]','mouseenter', function(){ 
    $('div.p' + this.className.slice(1)).slideDown('slow'); 
}).delegate('div[class^=y]', 'mouseleave', function(){ 
    $('div.p' + this.className.slice(1)).slideUp('slow'); 
});

這使用delegate以避免結合多個DOM元素的成本。

編輯要隱藏徘徊在另一元件上的p# DIV，您可以使用此代碼。

$('#container').delegate('div[class^=y]','mouseenter', function(){ 
    $('div.p' + this.className.slice(1)).slideDown('slow').siblings().slideUp(); 
});

來源

2010-10-13 20:41:02 lonesomeday

這個工作得很好。但現在我不得不問一個新的問題......我需要它繼續下滑p＃div。因爲有一個鏈接被點擊。我希望它滑過「只」時懸停另一個Y＃格。謝謝... – Ali 2010-10-13 20:51:14

@Ali每個請求編輯。 – lonesomeday 2010-10-13 20:56:44

現在當我懸停在y＃上，#container向上滑動，我不能看到另一個y＃元素：/ – Ali 2010-10-13 21:02:52

應該像這樣：

$(function(){ 
     $('div[class^=y]').hover(function(){ 
     var self = $(this), 
      number = this.className.slice(1); 

     $('div.p' + number).slideDown('slow', function() { 
     }); 
    }, function() { 
     var self = $(this), 
      number = this.className.slice(1); 

     $('div.p' + number).slideUp('slow', function() { 
     }); 
    }); 
});

例子：http://www.jsfiddle.net/Q5Ug2/

來源

2010-10-13 20:32:52 jAndy

你真的不需要'self'部分.. – 2010-10-13 20:34:57

這很有效。但現在我不得不問一個新的問題......我需要它繼續下滑p＃div。因爲有一個鏈接被點擊。我希望它滑過「只」時懸停另一個Y＃格。謝謝你... – Ali 2010-10-13 20:50:13

做的事情有點不同..

使用的ID用於p＃和Y＃系列指標。
在用於p＃系列的DIV標籤，添加Y＃系列的冠軍。所以<div id="p1" title="y1">
在爲Y＃系列的DIV標籤，添加一個類.. <div id="y1" class="hoverMe">

$('div.hoverMe').hover(function() { 
    $('[title=' + $(this).attr('id') + ']').slideDown('slow'); 
});

來源

2010-10-13 20:35:58 Fosco

如何使用jquery在鼠標上顯示重複的div？

回答

相關問題