javascript - 当到达幻灯片中的最后一个 div 时，如何跳回第一个 div？

Question

我想要一个简单的点击幻灯片，但是当我到达幻灯片的最后一个 div 并进一步点击时，所有内容都会隐藏。我如何确保它跳回第一个 div？

这就是我的 jquery 的样子:

function click() {
    $('#next').on('click', function () {
        var $current = $('.work.active');

        $('.work').removeClass('active')
        $current.next().addClass('active')

    })

}

因此 div 元素都具有相同的类 .work。 其中只有 1 个'active'

这是 HTML，您可以在其中看到我为每个 div 赋予了相同的类，只有一个是事件:

<section>
    <div class="work active">
        <section id="workTxt">
            <h1>Dynamic Infographic</h1>
            <p>This is a dynamic infographic that i made for a school assignment. The infographic contains of some
                data
                about 5 different airports. U can compare the total amount of passengers, total flights and the
                amount
                of cargo an airport had to handle. </p>
        </section>

        <section id="workImg">
            <a href="http://st392522.cmd19a.cmi.hanze.nl/pae5/">
                <div><img class="workIMG" src="img/infographic.png" alt="infographic"></div>
            </a>
            <div><img src="img/infoCol.png" alt="infographicColors"></div>
        </section>
    </div>



    <div class="work">
        <section id="workTxt2">
            <h1>My very first website!</h1>
            <p>This is my very first website i made. U can learn even more about me here, it contains of some
                general
                information about me.</p>
        </section>

        <section id="workImg2">
            <a href="http://st392522.cmd19a.cmi.hanze.nl/pae1/">
                <div><img class="workIMG" src="img/eerste.png" alt="First Website"></div>
            </a>
            <div><img src="img/eersteCol.png" alt="FirstColors"></div>
        </section>
    </div>



    <div class="work">
        <section id="workTxt3">
            <h1>Delivery site for a client</h1>
            <p>This is a delivery website i made for a friend. It's just fictional but it works :).</p>
        </section>

        <section id="workImg3">
            <a href="http://st392522.cmd19a.cmi.hanze.nl/pae2/">
                <div><img class="workIMG" src="img/delivers.png" alt="Delivery Website"></div>
            </a>
            <div><img src="img/deliverCol.png" alt="deliveryColors"></div>
        </section>
    </div>

    <div class="work">
        <section id="workTxt4">
            <h1>Redesign</h1>
            <p>This is a design I made in Adobe XD. I made some changes to <a
                    href="http://www.massageontspanningdeventer.nl/index.php"
                    style="text-decoration: none; color:#F5FF63; font-weight: 400;">this</a>
                site. I wanted to improve it looking at the design and complexion. </p>
        </section>

        <section id="workImg4">
            <a href="https://xd.adobe.com/view/9d326937-d1b0-4997-4fee-27b2965afde1-eb03/?fullscreen">
                <div><img class="workIMG" src="img/redesign.png" alt="Redesign"></div>
            </a>
            <div><img src="img/redesignCol.png" alt="redesignColors"></div>
        </section>
    </div>
</section>
<div><img src="img/next.png" alt="NEXT" id="next"></div>

Answer 1

只需在更改之前添加一个检查以查看它是否为空。

function click() {
    $('#next').on('click', function () {
        var $current = $('.work.active');

        $('.work').removeClass('active')

        if ($current.next() !== null) {
          $current.next().addClass('active')
        } else {
          $current.parent().first().addClass('active')
        }
    })
}