如何在JavaScript中实现下一个和上一个按钮？

Question

我在程序中使用了普通的JavaScript和jQuery。我有一个开始按钮，可以让程序自由运行。

<button class="button is-link" id= "start"> Start </button>

document.getElementsByTagName('button')[0].addEventListener('click', function() {
        step1();
        step2();
        step3();
        step4();
        step5();  
    })

function step1() {
   some action
}
function step2() {
   some action
}
function step3() {
   some action
}
function step4() {
   some action
}
function step5() {
   some action
}

我还将如何包含一个下一个和上一个按钮，可以在其中分别显示每个功能并在它们之间来回走动？

Answer 1

首先，您的代码中没有任何jQuery（以这种方式保留）:)

其次，如果页面没有重新加载，则应将单个事件侦听器如下附加。

var step = 0;
ele.addEventListener(function() {
// basically store which step you're on and the click adjusts the step
// and then calls the function associated with that step
    step++;
    doNextStep(step);
});

Answer 2

简单的开关案例将有所帮助。

<div id="text">Click start to run the app!</div>
<button class="button is-link" id= "start" onclick="start()"> Start </button>
<button class="button is-link" id= "next" onclick="next()"> Next </button>
<button class="button is-link" id= "previous" onclick="previous()"> Previous </button>

<script>
        var step = 0;

        function start() {
            step = 1;
            handleStep();
        }

        function next() {
            step++;
            handleStep();
        }

        function previous() {
            if (step > 0)
                step--;
            handleStep();
        }

        function handleStep() {
            switch (step) {
                case 1:
                    step1();
                    break;
                case 2:
                    step2();
                    break;
                case 3:
                    step3();
                    break;
                case 4:
                    step4();
                    break;
                case 5:
                    step5();
                    break;

                default:
                    step1();
                    // Go to the first step  or any other logic as you want
                    break;
            }
        }


        function setText(text) {
            document.getElementById("text").innerHTML = text;
        }

        function step1() {
            setText("Step 1");
        }
        function step2() {
            setText("Step 2");
        }
        function step3() {
            setText("Step 3");
        }
        function step4() {
            setText("Step 4");
        }
        function step5() {
            setText("Step 5");
        }

    </script>