Question

我有一个代码，可以在按钮点击的每个div之间导航。如果我有5 divs，我点击next按钮5次就会结束。但是，当我点击第6次时，它再次显示第一个div，就像一个循环。 previous按钮的情况也是如此。如何停止从5到1？如果我想回到div 1，唯一的方法就是点击previous按钮然后继续。

JSFiddle

html：

<div class="divs">
    <div class="cls1">1</div>
    <div class="cls2">2</div>
    <div class="cls3">3</div>
    <div class="cls4">4</div>
    <div class="cls5">5</div>
    <div class="cls6">6</div>
    <div class="cls7">7</div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>

JS：

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

Answer 1

您应该从每次点击回调中删除else块。当不再显示div时，else块会隐藏所有可见的div，并在点击下一个时显示第一个，或者在点击上一个时显示最后一个。

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        return false;
    });
});

Answer 2

只需更新下一个和上一个点击功能，这样它就不会返回到第一个和最后一个div

 $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide(); 
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        return false;
    });

如何停止显示第一个div的下一个按钮？

2 个答案: