Question

我正在jQuery中构建一个幻灯片，允许用户通过附加一个新的div，通过.load附加图像到底部，然后隐藏顶部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();

Answer 2

我今天在这个网站上花了好几个小时试图做一些与这个问题中发布的非常类似的事情。

我拥有的是上一个|接下来链接通过一系列div进行导航，隐藏和显示。

虽然我最终得到的不同于这里的答案......这是我最需要的地方。

所以，谢谢。

如果有人感兴趣，这就是我的所作所为：

<script language="javascript">

$(function() {
    $("#firstPanel").show();
});

$(function(){
    $(".nextButton").click(function () {
        $(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide();
    });
});
$(function(){
    $(".backButton").click(function () {
        $(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide();
    });
});
</script>

<style type="text/css">
    .defaultHidden { display: none; }
    .navigation { display: block; width: 700px; text-align: center; }
    #contentWrapper { margin-top: 20px !important; width: 700px; }
    .nextButton { cursor: pointer; }
    .backButton { cursor: pointer; }
</style>

<div class="navigation">
    <span class="backButton"><< Previous</span>&nbsp; | &nbsp;<span class="nextButton">Next >></span></button>
</div>
<div id="contentWrapper">
    <div id="firstPanel" class="panel defaultHidden">
        <img src="images/quiz/Slide1.jpg" width="640" />
    </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel" style="display: none;">
     <img src="images/quiz/Slide4.jpg" width="640" />
        </div>

    <div class="panel defaultHidden">
    <h1>Information Here</h1>       
    <p>Text for the paragraph</p>
    </div>

    <div class="panel defaultHidden">
    <img src="images/quiz/Slide6.jpg" width="640" />
    </div>
    Repeat ad naseum...
</div>

Answer 3

在黑暗中拍摄但是......

选择首先显示的div 并向上滑动

$('.slideShow:visible:first').slideUp();

在首次显示div 之后选择第一个隐藏的div 并向下滑动...

$('.slideShow:visible:first').next('.slideShow:hidden').slideDown()

psuedo选择器FTW！

Answer 4

以下内容应该可以解决问题

$(function() {
   $(".scrollUp").click(function() {
     //Check if any previous click animations are still running
     if ($("div.slideShow:animated").length > 0) return;
     //Get the first visible div
     var firstVisibleDiv = $("div.slideShow:visible:first");

     //Get the first hidden element before the first available div
     var hiddenDiv = firstVisibleDiv.prev("div.slideShow"); 
     if (hiddenDiv.length === 0) return; //Hit the top so early escape
     $("div.slideShow:visible:last").slideUp();
     hiddenDiv.slideDown();
   });
   $(".scrollDown").click(function() {
     if ($("div.slideShow:animated").length > 0) return;
     var lastVisibleDiv = $("div.slideShow:visible:last");
     if (lastVisibleDiv.next("div.slideShow").length === 0) {
         //No next element load in content (or AJAX it in)
         $("<div>").addClass("slideShow")
                   .css("display", "none")
                   .text("Dummy")
                   .insertAfter(lastVisibleDiv);
     }
     $("div.slideShow:visible:first").slideUp();
     lastVisibleDiv.next().slideDown();
   });
});

此解决方案唯一能做的就是检查以前不可见的元素是否正在动画化。这解决了在动画完成之前多次点击链接的一些问题。如果使用AJAX你必须做类似的事情（例如打开/关闭全局变量 - 或者只是禁用向下滚动链接）以避免一次向服务器发出多个请求......

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

4 个答案: