如何根据从数据库中获取的项目数在每次单击按钮后动态显示 div

Question

我的数据库中有一些数据。我将获取数据并使用计数。现在我必须在div 中逐个显示这些数据。所以会有第一个数据和下一个按钮。当我单击"下一步"按钮时，显示获取的第二个数据，依此类推，直到最后。最后，下一个按钮消失，另一个按钮出现。

请注意：我正在使用蟒蛇烧瓶作为后端

怎么做???

     <button type="button" class="btn btn-primary m-b-10 m-l-5" onclick="nextpart()" style="display:inline">Next ></button>
<div class="form-left-w3l" id="welcomeDiv1">
            <h6>Data : {{ id }}</h6>
        </div>
<div id="welcomeDiv2">
</div>

.JS：

function nextpart() {
               document.getElementById('welcomeDiv1').style.display = "none";
               document.getElementById('welcomeDiv2').style.display = "block";
               }

Answer 1

将数据保存在数组中。使用 for 循环创建所有div。让他们都style="display:none".

然后.show()第一个，并向其中添加一个类似active的类。

将 Next-Button 挂接到一个函数：.hide()div active并从中删除active类。 .show()该div 的下一个同级并添加active类。

对"上一个"按钮使用相同的逻辑。