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

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 etc." 是我在页面上给按钮的 ID，我在 DIV 中分别命名为 "page01, page02, page03 etc."

如果没有第二个 if 语句，脚本将按照我想要的方式工作，它会将 "page01" 的显示更改为 none，将 "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/

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

Do I need to create multiple functions for multiple actions or can they all be housed in the same function?

javascript

forms

if-statement

show-hide