Question

例如，我有一个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 =＆gt; p2，y3 =＆gt; p3 ... y12 =＆gt; P12。我希望你们了解我。非常感谢你!!!!

Answer 1

应该是这样的：

$(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/

Answer 2

做一些不同的事情......

将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');
});

Answer 3

我将假设您的y# div位于ID为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();
});

如何用jquery在鼠标上显示重复的div？

3 个答案: