创建“div”层并在单击相应按钮时显示它们答案

【问题标题】：Creating layers of 'divs' and displaying them on clicking corresponding buttons创建“div”层并在单击相应按钮时显示它们
【发布时间】：2017-11-02 12:40:56
【问题描述】：

我正在尝试创建一个网页，其中有一堆 div 和对应的按钮。单击按钮时，我需要能够显示 div。

我面临的问题是我点击任意按钮的那一刻，显示了div，但随后的按钮点击不显示其对应的div。

我对所有的 div 都使用了 set display: none，在单击相应的 div 时，使用 div.style.display = "block" 将显示设置为 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++;
      }
    }

以下是将显示设置为无/块的代码：

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

“div”和按钮都是动态创建的，“noteName”是存储每个 div 的“id”并在函数addNote() 的每次迭代中命名它的变量。

PS 我实际上将“div”元素用作按钮，因此在上面将它们称为“按钮”。

有什么帮助吗？

【问题讨论】：

您能否将代码粘贴到问题中。问题不明显
发布你的代码，当你点击按钮时设置不显示/阻止
我添加了代码。如果您需要任何其他信息，请告诉我（我是新手）。我需要一种方法来隐藏所有其他 div 并仅显示单击按钮的那个。
您想在单击按钮时显示 div 对吗？那么，为什么是事件监听器添加到了 div 而不是按钮呢？
我实际上是在为按钮使用 'div' 元素。忘记说了。

标签： javascript html css

【解决方案1】：

您的文档不应在同一页面上有重复的 ID，因为这不符合 W3 规范。 getElementById() 返回集合中的第一个元素（这就是为什么只显示一个 div 而不显示其余部分的原因）。请改用类选择器。

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

【讨论】：