如何使用按钮在数组中的多个 div 之间切换？答案

【问题标题】：How to toggle between multiple divs in an array using a button?如何使用按钮在数组中的多个 div 之间切换？
【发布时间】：2020-09-07 22:07:57
【问题描述】：

该程序的想法是，当您单击继续按钮时，它会显示数组中的下一个 div 并隐藏所有其他 div（如果您熟悉brilliant.org，它与“继续”按钮相同上课时）。但是，我的代码不起作用。感谢您的帮助

HTML：

<a id="button" role="button" href="#"><h1>Continue</h1></a>
<div id="page1">text1</div>
<div id="page2">text2</div>
<div id="page3">text3</div>

JS：

$("#page1").show();
$("#page2").hide();
$("#page3").hide();

var texts = [page1,page2,page3];
var arrayLength = texts.length;

$(document).on ("click","#button", function () {
        var i;
        for (i = 0; i < arrayLength; i++) {
            console.log(texts[i]);
            var text = texts[i];
            text.show();
            texts.hide();
        }
});

【问题讨论】：

标签： javascript html jquery arrays web

【解决方案1】：

您可以使用:visible 选择器来获取当前选择器。

在.next()之后你可以得到下一个元素，如果这个元素在最后一个元素之后你可以回到第一个元素。

现在您可以显示下一个并隐藏上一个。

$("#page1").show();
$("#page2").hide();
$("#page3").hide();

var texts = [page1,page2,page3];
var arrayLength = texts.length;

$(document).on ("click","#button", function () {
    var visibleEle = $('[id^=page]:visible');
    var nextEle = visibleEle.next('[id^=page]');
    if (nextEle.length == 0) {
        nextEle = $('[id^=page]:first');
    }
    visibleEle.hide();
    nextEle.show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a id="button" role="button" href="#"><h1>Continue</h1></a>
<div id="page1">text1</div>
<div id="page2">text2</div>
<div id="page3">text3</div>

【讨论】：