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();
});

jquery显示同一类的下一个div？

1 个答案: