Question

我正在编写一个脚本来模拟问卷调查中的页面更改。我想也许我可以使用一堆＆＃34;如果＆＃34;在我开始创建单独的函数之前，陈述所有逻辑，但它不能正常工作我想知道是否可以将它们全部放在一个函数中。

到目前为止，这是脚本

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

＆＃34; p1next，p2back，p2next等。＆＃34;是我在页面上给出按钮的ID，我在DIV中分别命名为＆＃34; page01，page02，page03等。＆＃34;

如果没有第二个if语句，脚本会按照我想要的方式工作，它会更改＆＃34; page01＆＃34;没有和＆＃34; page02＆＃34;阻止。当我添加第二个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/

我是否需要为多个动作创建多个功能，还是可以将它们全部放在同一个功能中？

2 个答案: