javascript-点击时消失的div-如何进行循环，以便在最后一个div消失时第一个div返回？

情报中心 lv.1

发布时间：2022-06-02 07:56:10 290

相关标签： # 前端

目前正在处理一个我有很多文本的项目我决定将每个段落放在面板（DIV）上，它们都在彼此之上，当您单击 div 时它会消失（在 CSS 中，面板移动到-100% 的屏幕），然后我们可以看到下一个 div 等，这样一直持续下去。但我的问题是当我到达最后一个 div 后，我有一个空白页面，除了刷新不是很理想的页面外，没有办法返回。所以我想知道是否有一个系统可以创建一个循环，让我遍历所有 div（data-target=".panel-1",-2,-3-,4 等），最后一个带来我回到第一个 div，所以它进行了适当的旋转。

在下面的示例中，我只放置了两个面板，但还有更多。最简单的方法是什么？非常感谢！

jQuery$(document).ready(function () {

    grade();
});


function grade() {
    $(".grade").on("click", function () {
        var target = $(this).attr('data-target');
        // console.log(1);
        $(target).addClass('off');
    });
}

.panel {
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: left 0.8s ease-in-out;
}

.panel.off {
    left: -100%;
}

.panel-content {
    height: 100%;
    overflow: auto;
}

.panel-1 {
    width: 100%;
    background-color: blue;
    z-index: 1100;
}

.panel-2 {
    width: 100%;
    background-color: yellow;
    z-index: 1000;
}

<div data-target=".panel-1" class="panel panel-1 grade">
    <div class="panel-content">
       <h3>What is the concept of the project?</h3><br>
           <p>Text</p>
    </div>
</div>
 <div data-target=".panel-2" class="panel panel-2 grade">
    <div class="panel-content">
       <h3>What is the aim of the project?</h3><br>
           <p>Text</p>
    </div>
</div>

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。