jquery 显示相同 class 的下一个 div？

Question

我有一堆 div 之类的

            <div class="slides">
                <div id="box_bg">
                    <div class="previous"></div>
                    <img src="images/minido_pic.png" width="267" height="252" alt="MiniDo" class="img1" />
                    <div class="next"></div>
                </div>
                <div id="text1">
                    <p>MiniDo - Adobe Air App - Simplistic design wrapped around a simple iOS style window built for the Windows environment using Adobe Air.</p>
                </div>
            </div>

和一堆 jquery

$(document).ready(function(){   
    $(".slides").hide();

        var length = $(".slides").length;
        var ran = Math.floor(Math.random()*length);
        $(".slides:nth-child(" + ran + ")").show();

    $('.previous').click(function() {
        $(".slides").parentsUntil(".slides").prev().show();
        $('.slides').hide();
    });

    $('.next').click(function() {
        $(this).parentsUntil(".slides").next().show();
        $('.slides').hide();
    });
});

现在我想要的是在页面加载时，显示一个可以正常工作的随机“.slides”。 然后当用户按下“.next”或“.previous”时，它会加载下一个“.slides”。

但是我似乎无法让它工作？ 当我按下一个或上一个时，它什么也没显示？

有什么帮助吗？

Answer 1

你应该使用

对于以前的

$(this).closest('.slides').prevAll('.slides').eq(0).show();

接下来

$(this).closest('.slides').nextAll('.slides').eq(0).show();

最重要的是在显示下一张之前隐藏.slides 。

所以$('.slides').hide(); 应该在.show()命令之前，否则，你只显示你想要的然后隐藏所有（包括你刚刚显示的那个）

---

共

$('.previous').click(function() {
    $('.slides').hide();
    var previous = $(this).closest('.slides').prevAll('.slides').eq(0);
    if (previous.length === 0) previous = $(this).closest('.slides').nextAll('.slides').last();
    previous.show();
});

$('.next').click(function() {
    $('.slides').hide();
    var next = $(this).closest('.slides').nextAll('.slides').eq(0);
    if (next.length === 0) next = $(this).closest('.slides').prevAll('.slides').last();
    next.show();
});