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

我正在编写一个脚本来模拟我正在构建的问卷中的页面更改。我想也许我可以用一堆“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”的显示更改为none，将“page02”的div更改为block。当我添加第二个if语句时，它不起作用

---

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

不完全正确，您应该使用

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";
};

---

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

为什么不尝试以下操作：

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";
};

HTML:

…

…

…

jQuery：

var pageNum=1

$（文档）.ready（函数（）{


$（“#btnPrev”）。在（“单击”，函数（）{ChangePage（-1）；}）；


$（“#btnNext”）。在（“单击”，函数（）{ChangePage（1）；}）；


更改页面（0）；


}）

功能更改页（p）{


$（“.page”）.hide（）；


pageNum+=p；


$（“.page[data pg='“+p+']”）show（）；


$（“#btnPrev”）.removeAttr（“禁用”）；


$（“#btnNext”）。删除设置（“禁用”）；


if（pageNum==1）$（“#btnPrev”）.attr（“禁用”、“禁用”）；


if（pageNum==$（“.page”）.length）$（“.btnNext”）.attr（“禁用”、“禁用”）；


}

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


更新：

今天我手头有很多时间，在使用香草Javascript时没有编写代码。下面是使用纯js的代码版本：
我完全不知道这意味着什么，也不知道如何使用它。在html中，您有属性“data pg=”，这到底是什么？这是一个自定义属性。它对元素没有任何影响。它只存储数据。因此，脚本的基本功能是：1）首先隐藏所有页面（类为“page”的div），2）更新当前页码的值，3）显示具有当前页码值的页面。通过这样做，添加页面时不需要更改脚本。只需添加一个div并设置适当的data pg（可以命名为任何名称，因为这是一个自定义属性）值。希望您可以查看jQuery。可能对你有很大帮助。很好的一天！需要明确的是，“datapg”在html中并没有任何意义，只是可以告诉JQuery以任何方式查找和使用它，不管您如何编写JQuery来使用它？