創建'divs'層並在單擊相應按鈕時顯示它們

我正在嘗試創建一個網頁，其中包含一疊div以及相應的按鈕。點擊按鈕，我需要能夠顯示div。創建'divs'層並在單擊相應按鈕時顯示它們

我面臨的問題是，當我單擊任何按鈕時，顯示div，但隨後的按鈕單擊不顯示其相應的div。

我對所有的div使用了集合display: none，並且在點擊相應的div時，顯示設置爲display: block，使用div.style.display = "block"。

下面是完整的javascript：

function init() { 
     var i = 0; 

     var add = document.getElementById("add-button"); 
     add.addEventListener("click", addNote); 

     function addNote() { 
     var mainClass = "wholenote" + i; 
     var note_name = prompt("Enter a name for the note"); 
     var div = document.createElement("div"); 
     var node = document.createTextNode(note_name); 
     div.appendChild(node); 
     div.className = "note"; 
     div.className += " " + mainClass; 

     var inputButton = document.createElement("input"); 
     inputButton_id = "deletetheNote" + i; 
     inputButton.setAttribute("id", inputButton_id); 
     inputButton.setAttribute("type", "image"); 
     inputButton.setAttribute("src", "Dustbin.png"); 
     inputButton.className += "deleteButton"; 
     div.appendChild(inputButton); 

     var element = document.getElementById("side-bar"); 
     element.appendChild(div); 

     noteArea = document.createElement("div"); 
     noteArea.className = "note-area"; 
     noteArea.className += " " + mainClass; 
     var noteName = "note" + i; 
     noteArea.setAttribute("id", noteName); 
     document.getElementById("main-area").appendChild(noteArea); 


     div.addEventListener("click", function() { 
      document.getElementById(noteName).style.display = "block"; 
     }, true); 

     inputButton.addEventListener("click", function() { 
      var elems = document.getElementsByClassName(mainClass); 
      console.log(elems); 
      for (var k = elems.length - 1; k >= 0; k--) { 
      var parent = elems[k].parentNode; 
      parent.removeChild(elems[k]); 
      } 
     }); 
     i++; 
     } 
    }

下面是一個設置顯示爲none /塊中的代碼：

div.addEventListener("click", function() { 
      document.getElementById(noteName).style.display = "block"; 
     }, true);

在「的div」和按鈕都被動態地創建， 'noteName'是爲每個div存儲'id'的變量，並在函數addNote()的每次迭代中命名它。

PS我實際上使用'div'元素作爲按鈕，因此將它們稱爲上面的'按鈕'。

任何幫助？

來源

2017-06-01 Saha

您可以在問題中粘貼您的代碼。問題並不明顯 –

發佈您的代碼，當您單擊按鈕 –

時，我設置了none/block顯示我添加了代碼。讓我知道你是否還有其他需要的信息（我是一名新的學習者）。我需要一種方法來隱藏所有其他div，並只顯示按鈕被點擊的方式。 – Saha

您的文檔不應該在同一頁上有重複的ID，因爲這不符合W3規範。 getElementById()返回集合中的第一個元素（這就是爲什麼只有一個div顯示，而不是其餘）。改爲使用類選擇器。

示例（使用jQuery，但主體相同）：https://jsfiddle.net/hq7c7h2u/

來源

2017-06-01 12:06:43

創建'divs'層並在單擊相應按鈕時顯示它們

回答

相關問題