我是否需要爲多個動作創建多個功能，還是都可以將它們放在同一個功能中？

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等」。

如果沒有2nd 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中這樣做的道歉。

---

更新：

今天在我的手上了大量的時間，並沒有編碼，同時使用香草的JavaScript。這裏是使用普通js的代碼版本：https://jsfiddle.net/hhnbz9p2/