0

我正在创建一个可以包含随机数量的画廊项目的照片库。代码如下所示：

<div class="gallery-item">
   <div id="gal-img1"><a href=""><img src="15.jpg"></a></div>
   <div class="gal-desc" id="gal-desc1"><h5>Title</h5></div>
</div> 
.........

<div class="gallery-item">
   <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div>
   <div class="gal-desc" id="gal-descn"><h5>Title</h5></div>
</div>

“gal-desc”类的“display”设置为“none”，在 gal-img(1) 到 gal-img(n) 鼠标悬停时，我想将其相应 gal-desc 的“display”设置为“block” (1) 到 gal-desc(n)。

我可以手动插入从 1 到 100 的以下代码，但如果我将获得 40 个画廊项目，我将有 60 个鼠标悬停不可用。如果我有 110 个画廊项目，那么 10 个项目不会产生预期的效果。

$("#gal-img1").mouseover(function(){  
    $("#gal-desc1").css('display','block'); 
});

我用 $("div[id^=gal-img]").length 获得的画廊项目的最大数量，但从这里开始我被卡住了。

请你们给我一个想法，我必须朝哪个方向走。

谢谢你。

4

4 回答 4

1

改变

<div id="gal-imgn">

至

<div class="gal-img">

然后这样做：

$(".gal-img").mouseover(function(){  
    $(this).next(".gal-desc").show(); 
});

另外，您可以像这样添加 mouseout：

$(".gal-img").mouseover(function(){  
    $(this).next(".gal-desc").show(); 
}).mouseout(function(){
    $(this).next(".gal-desc").hide();
};

这是这个（低效）代码的乐趣。 http://jsfiddle.net/d27Nn/1/

于 2012-12-05T20:02:11.317 回答
1

我不确定我是否理解这个问题，也许你正在寻找一些 CSS？就像是：

.gallery-item > div:first-child:hover{display:block;}
于 2012-12-05T19:54:31.567 回答
1

您可以使用相同的选择器来定位所有元素，以获取正确数量的元素，然后在函数内部使用上下文仅定位.gal-desc悬停元素父级内的元素.gallery-item等：

$("div[id^=gal-img]").on('mouseenter', function() {
    $(this).closest('.gallery-item').find('.gal-desc').show();
});

或在鼠标进入/离开时切换可见性

$("div[id^=gal-img]").on('mouseenter mouseleave', function(e) {
    $(this).closest('.gallery-item').find('.gal-desc').toggle(e.type=='mouseenter');
});
于 2012-12-05T19:54:50.287 回答
1

使用事件委托，它在 jQuery 中使用 $.on 可用。将所有 .gallery-items 包装在一个容器中，使其像我在下面对 .gallery 所做的那样工作。这将允许无限数量的 .gallery-items 并且非常高效。

<div class="gallery">
    <div class="gallery-item">
        <div id="gal-imgn"><a href=""><img src="15.jpg"></a></div>
        <div class="gal-desc" id="gal-descn"><h5>Title</h5></div>
    </div> 
    .....
</div>
.....
$('.gallery').on('mouseenter mouseleave', '.gallery-item', function (e) {
    if (e.type === 'mouseenter') {
        $(this).find('.gal-desc').show();
    }
    else {
        $(this).find('.gal-desc').hide();
    }
});
于 2012-12-05T19:58:33.650 回答