找到下一个隐藏的div并使用jQuery选择器显示它

Question

我正在jQuery中构建一个幻灯片,允许用户看到四个图像,并通过它们向前和向后翻页,方法是通过.load附加一个新的div与图像到底部,然后隐藏顶部div.我对编程很新.

我在设计选择器时遇到麻烦,允许用户在第一个显示的div之后"返回"显示下一个隐藏的div,并隐藏最后一个显示div - faux代码示例.

<div class="slideShow" >image one (display = none)</div>
<div class="slideShow" >image two (display = none)</div>
<div class="slideShow" >image three </div>
<div class="slideShow" >image four </div>
<div class="slideShow" >image five </div>
<div class="slideShow">image six </div>

<a href="#" class="scrollUp" >Scrollup</a>
<a href="#" class="scrollDown" >ScrollDown</a>

Jquery加载新图像并附加到底部,并隐藏当前显示的第一个div.

$('.scrollDown').click(function() {
$('.slideShow:last').after('<div class="slideShow"></div>'); // add a new div to the bottom.
$('.appendMe:last').load('myimagescript.py'); // load in the image to the new div.

// here I need to find a way of selecting in this example the first shown image (image three) and applying a .slideUp(); to it

});

Jquery允许用户返回他们之前看到的图像并隐藏底部最后显示的div

$('.scrollUp').click(function() {

// here I need to find a way of selecting in this example the first hidden div (image two) after the first shown div (image three) and applying a slideDown(); to it.

$('.slideShow:last').slideUp(); // hide the last image on the page - trouble is what happens  if they user now clicks scrollDown - how do I reshow this div rather than just loading a new one?


});

Answer 1

我不太正确理解,但是这个信息可能会有所帮助...你需要匹配第一个可见的div然后使用.prevAll()和filter来获取隐藏的兄弟

$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown();