Question

我已经在jQuery中开发了一个定制画廊，它可以按照我想要的方式工作，所以你可以点击上一个和下一个按钮来改变图像，但是我想要一些额外的东西。

我目前有一个有过滤器的图库。过滤器的工作原理是在不属于特定过滤器的情况下向元素添加“style =”display：none;“

现在，使用当前有效的代码，它会在遇到这些元素时中断，因为它没有与之关联的显示。

我基本上需要忽略所有打开“display：none”的元素，然后转到下一个可见的下一个元素。

这是我的代码的外观：

<li class="mix autumn food " data-myorder="1">
<a href="#">
<div class="image" style="background-image: url(URL GOES HERE); background-repeat: no-repeat;">
</div><!--image-->
<div class="gallery_overlay"><span></span><h6>View large image</h6></div><!--gallery_overlay-->
</a>
<div class="image_large">
<span class="gallery_close"></span>
<span class="prev">PREV</span>
<span class="next">NEXT</span>
<div class="image_wrap" style="background-image: url(URL GOES HERE); background-repeat: no-repeat;"></div><!--image_wrap-->
</div><!--image_large-->
</li>

因此它将“display：none”添加到mix类中。

请参阅下面的jQuery，它适用于上一个和下一个：

$('#gallery_list ul li .image_large span.next').click(function(){
    $('#gallery_list ul li .image_large').hide();
    $(this).parent().parent().next().find('.image_large').show();
});

$('#gallery_list ul li .image_large span.prev').click(function(){
    $('#gallery_list ul li .image_large').hide();
    $(this).parent().parent().prev().find('.image_large').show();
});

对此的任何帮助都将受到广泛赞赏。

非常感谢，克雷格

Answer 1

这个怎么样？找到第一个可见的

$('#gallery_list ul li .image_large span.next').click(function(){
    $('#gallery_list ul li .image_large').hide();
    $(this).parent().parent().nextAll("li:visible:first").find('.image_large').show();
});

$('#gallery_list ul li .image_large span.prev').click(function(){
    $('#gallery_list ul li .image_large').hide();
    $(this).parent().parent().prevAll("li:visible:first").find('.image_large').show();
});

带过滤器的jQuery库

1 个答案: