我是否需要为多个操作创建多个功能，或者它们都可以放在同一个功能中？

Question

我正在编写一个脚本来模拟我正在构建的问卷中的页面更改。我想也许我可以使用一堆“if”语句来容纳所有逻辑，但它不能正常工作，在我去创建单独的函数之前，我想知道是否可以将它们全部放在一个函数中。

到目前为止，这是脚本

function pageChange(){
        var chng1 = document.getElementById("p1next");
        var chng2a = document.getElementById("p2back");
        var chng2b = document.getElementById("p2next");
        var chng3a = document.getElementById("p3back");
        var chng3b = document.getElementById("p3next");
        var pg1 = document.getElementById("page01");
        var pg2 = document.getElementById("page02");
        var pg3 = document.getElementById("page03");

        if (chng1.click){
            pg1.style.display="none";
            pg2.style.display="block";
            }
        if (chng2a.click){
            pg1.style.display="block";
            pg2.style.display="none";
            }

“p1next、p2back、p2next 等”是我在页面上为按钮提供的 ID，我在 DIV 中分别命名为“page01、page02、page03 等”。

如果没有第二个 if 语句，脚本将完全按照我想要的方式工作，它会将“page01”的显示更改为无，并将“page02”的 div 更改为阻止。当我添加第二个 if 语句时它不起作用。

我想这样做而不是制作实际页面的原因是因为我不希望数据在加载另一个页面时丢失。我是在正确的轨道上还是需要为每个页面创建一个新函数？

Answer 1

不完全在正确的轨道上，您应该使用onclick 事件，而不是像这样的if (x.click)：

var chng1 = document.getElementById("p1next");
var pg1 = document.getElementById("page01");
var pg2 = document.getElementById("page02");

// Events
chng1.onclick = function(){
    pg1.style.display="none";
    pg2.style.display="block";
};

这将保存您的函数，直到单击该元素，然后执行该函数。在您的情况下，它是在页面加载时执行的，此时用户没有点击任何东西。

Answer 2

为什么不试试这样的：

HTML：

<div class="page" data-pg="1">...</div>
<div class="page" data-pg="2">...</div>
<div class="page" data-pg="3">...</div>
<input id="btnPrev" type="button" value="Prev" />
<input id="btnNext" type="button" value="Next" />

jQuery:

var pageNum = 1;

$(document).ready(function () {
$("#btnPrev").on("click", function () { ChangePage(-1); });
$("#btnNext").on("click", function () { ChangePage(1); });

    ChangePage(0);
});

function ChangePage(p) {
$(".page").hide();
pageNum += p;
$(".page[data-pg='" + p + "']").show();

    $("#btnPrev").removeAttr("disabled");
$("#btnNext").removeAttr("disabled");

    if (pageNum === 1) $("#btnPrev").attr("disabled", "disabled");
if (pageNum === $(".page").length) $("#btnNext").attr("disabled", "disabled");
}

这样，您无需更改脚本即可轻松增加页面数量。顺便说一句，我很抱歉在 jQuery 中这样做。

---

更新：

今天有很多时间在我手上，并且在使用 vanilla Javascript 时没有编码。这是使用纯js的代码版本：https://jsfiddle.net/hhnbz9p2/