Question

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

我面临的问题是，当我点击任意按钮时，会显示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++;
      }
    }

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

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

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

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

任何帮助？

Answer 1

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

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

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

1 个答案: