當我使用我的函式時，Javascriptstyle.display沒有更新樣式-有解無憂

我正在嘗試創建一個功能，當您單擊一個按鈕時，它會洗掉一個 div，并添加另一個 div，然后當您再次按下該按鈕時，它將洗掉該 div 和另一個 div。這大約進行了 4 次，直到我到達終點，然后當我再次按下按鈕時，它應該回到開頭。我究竟做錯了什么？

let switchData = (selected, removed1, removed2, removed3) => {
    if(!document.getElementById("show-next-data")) {
        return;
    }
    document.getElementById("show-next-data").addEventListener("click", ()=> {
        let infoData = [selected, removed1, removed2, removed3];   

        document.getElementById(selected).style.display = "block";
        /*for (let i = 0; i < infoData.length; i  ) {
            document.getElementById(infoData[i]).style.display = "none";
        }*/
        document.getElementById(removed1).style.display = "none";
        document.getElementById(removed2).style.display = "none";
        document.getElementById(removed3).style.display = "none";

    });
}
switchData("dog-care", "cat-care", "youtube-media", "table-data");
switchData("cat-care", "dog-care", "youtube-media", "table-data");
switchData("youtube-media", "cat-care", "dog-care", "table-data");
switchData("table-data", "cat-care", "youtube-media", "dog-care");

<div id="info-content">
    <div id="dog-care">
        <h1 id="animal-info">How To Take Care Of My Dog:</h1>
        <h4 id="animal-info">Make sure your dog is well fed 
        </h4>
    </div>
    <div id="cat-care">
        <h1 id="animal-info">How To Take Care Of My Cat:</h1>
        <h4 id="animal-info">Make sure your cat is well fed 
        </h4>
    </div>
    <div id="youtube-media">
        <iframe width="200%" height="300%" src="https://www.youtube.com/embed/Yzv0gXqoCkc" title="YouTube video player" 
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ></iframe>
    </div>
    <div id="table-data">

        <h1>table goes here</h1>

    </div>

    <h1 id="show-next-data">︾</h1>
  </div>

uj5u.com熱心網友回復：

少寫多做，讓你的生活更輕松：

const divs = document.querySelectorAll("#info-content>div");
var idx=0;
divs.forEach(nextDiv); // step through all divs once to hide them all but the first ...
document.getElementById("show-next-data").onclick=nextDiv;
function nextDiv(){
 divs[idx].style.display="none";
 divs[idx=(idx 1)%divs.length].style.display="";
};

<div id="info-content">
  <div id="dog-care">
    <h1 id="animal-info">How To Take Care Of My Dog:</h1>
    <h4 id="animal-info">Make sure your dog is well fed
    </h4>
  </div>
  <div id="cat-care">
    <h1 id="animal-info">How To Take Care Of My Cat:</h1>
    <h4 id="animal-info">Make sure your cat is well fed
    </h4>
  </div>
  <div id="youtube-media">
    <iframe width="200%" height="300%" src="https://www.youtube.com/embed/Yzv0gXqoCkc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
  </div>
  <div id="table-data">
    <h1>A table goes here</h1>
  </div>

  <button id="show-next-data">︾</button>
</div>

該函式nextDiv()顯示下一個div從idx（集合中的索引號divs（使用選擇器找到#info-content>div）開始。當前的 div 被隱藏，idx 增加，并且通過將其.style.display屬性重置為""（一個空字串）來顯示下一個 div。

uj5u.com熱心網友回復：

問題是您添加事件偵聽器而不是實際更改頁面上的任何內容。呼叫該函式switchData()會將 EventHandler 添加到show-next-data. 當您單擊該 div 時，EventHandler 中的代碼會被觸發。在此之前沒有任何事情發生。

不過，這似乎不是您想要做的。因為當你switchData()多次呼叫時，你只是添加了更多的EventHandlers。而且您無法確定 EventHandler 的觸發順序，因此您的代碼變得不可預測。

相反，您可能想要做的是擺脫事件處理程式。您的函式將如下所示：

let switchData = (selected, removed1, removed2, removed3) => {
    if(!document.getElementById("show-next-data")) {
        return;
    }
    let infoData = [selected, removed1, removed2, removed3];   

    document.getElementById(selected).style.display = "block";
    /*for (let i = 0; i < infoData.length; i  ) {
        document.getElementById(infoData[i]).style.display = "none";
    }*/
    document.getElementById(removed1).style.display = "none";
    document.getElementById(removed2).style.display = "none";
    document.getElementById(removed3).style.display = "none";
}

現在呼叫該函式實際上做了一些事情，但單擊show-next-datadiv 當然不會。所以你仍然需要一個 EventHandler（順便說一下 EventHandler 和 EventListener 在這里意味著同樣的事情）。因此，您將在switchData()函式外部添加 EventHandler，然后switchData從 EventHandler 內部呼叫。

與您當前代碼的不同之處在于該switchData函式當前添加了新的 EventListener，當單擊 div 時將觸發。我建議在函式外部添加一個 EventHandler，然后呼叫該函式。這可能是您最初想要的，并且不會在每個函式呼叫時都創建新的 EventHandler，從而使代碼變得非常不可預測。

剩下的唯一問題是弄清楚何時要顯示哪些資料。目前，您只是通過呼叫該函式 4 次對其進行硬編碼。那是糟糕的設計，因為它很難回傳并更改某些內容（例如添加新部分，洗掉舊部分等）。

為此，您可以遍歷“info-content” div 的所有子節點并檢查哪個當前可見，哪些不可見，然后顯示下一個或其他內容。

在結束這個長長的回復之前，我想給你一些最后的提示：

“show-next-data”應該是一個按鈕，對吧？讓它成為一個按鈕。不要讓它成為 h1 標頭。瀏覽器實際上可能存在一些問題，即使對于標題也不接受 onclick，但我沒有對此進行測驗。但無論如何，請使其成為按鈕元素，以使您的代碼更具可讀性。
不要用“let”宣告一個函式。“let”是指您以后想再次更改的變數。對于函式，您最好使用“const”（與 let 相同，但它不允許您稍后更改變數）或普通函式語法（即“function switchData(...) { ... }”或“const switchData = (...) { ... }")。
如果您的網站布局發生變化，您可能希望稍后更改該功能以隱藏 4 個 div 或僅 2 個 div，而不是“removed1、removed2、removed3”。因此，制作函式的更好方法是使用rest 引數: switchData(selected, ...removed)。“已移除”現在將是一個陣列。你仍然會以你做 rn 的方式呼叫 switchData，即switchData("dog-care", "cat-care", "youtube-media", "table-data");仍然是呼叫函式的方式，但是在你現在擁有的函式體中removed == ["cat-care", "youtube-media", "table-data"]。然后你可以像現在一樣遍歷陣列并隱藏每個元素。這使您可以輕松更改引數數量，而無需更改整個函式。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/464573.html

標籤：javascript html 功能展示

上一篇：如何使用函式將geom_rect物件從資料框中添加到ggplot

下一篇：有沒有辦法讓函式呼叫“繼續”影響其呼叫者中的回圈？