javascript - 循环下一个按钮以返回从头开始显示

Question

    $(document).ready(function() {
        $(".container .parts").each(function(e) {
            if (e > 1)
                $(this).hide();
            console.log(e);
        });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="parts">A</div>
    <div class="parts">B</div>
    <div class="parts">C</div>
    <div class="parts">D</div>
    <div class="parts">E</div>
</div>
<div>
    <button id="next">Next</button>
</div>

您好，在此处的代码中，我试图让脚本返回到再次显示前两个 div(如果是 div 的末尾)，但在最后一个 div 中它消失了。

Answer 1

好的，

我认为这应该做你之后的事情，它会做(AB)，(CD)，(E)，然后回到(AB)....

$(document).ready(function() {
        var step = 0;
        var dcount = 2; //how many divs shall we show..
        var parts = $('.container .parts');        
        function showbits() {
            //loop all parts
            parts.each(function (x) {
              //is our step in range..?
              $(this).toggle(x >= step && x < step + dcount); 
            });
            //increae our step by out div count..
            step = step + dcount;
            //if step is greater than length go back to 0..
            if (step >= parts.length) step = 0;
        }
        showbits();
        $("#next").click(showbits);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="parts">A</div>
    <div class="parts">B</div>
    <div class="parts">C</div>
    <div class="parts">D</div>
    <div class="parts">E</div>
</div>
<div>
    <button id="next">Next</button>
</div>