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

Question

The idea of the program is that when you click on the continue button it shows the next div in the array and hides all the others (if you're familiar with brilliant.org, it's the same as the "continue" button when you're taking a course). However, my code doesn't work. Thanks for the help

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();
        }
});

Answer 1

You can use :visible selector in order to get current one.

After with .next() you can get the next element, and if such element is one after the last one you can go back to the first ele.

Now you can show the next and hide the previous one.

 $("#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>