Question

必备条件：allPanelElems1[j]具有元素t1之类的元素t2，t3，div等。

我正在对元素数组调用javascript函数handlePanelClick1。在函数内部，我要添加其他元素，即apiinfo。现在，将为数组allPanelElems1[j]中的每个元素调用此函数。当用户单击allPanelElems1[j]的任何元素时（例如t1），则内部函数元素apiinfo会成功添加，但是当用户单击同一元素（t1时）再次添加元素apiinfo。

有没有一种方法，这样，当用户首次单击任何元素时，应添加apiinfo元素。但是，如果用户再次调用该元素，则不应添加apiinfo。对于其他元素t2，t3等类似吗？

var allPanelElems1 = accordionElem.querySelectorAll(".panel1");
for (var j = 0, len1 = allPanelElems1.length; j < len1; j++) {
  allPanelElems1[j].addEventListener("click", handlePanelClick1);
}

function handlePanelClick1(event) {
  if (event.currentTarget.getAttribute('class').indexOf('active') >= 0) {
    event.currentTarget.classList.remove("active");
  } else {
    prod1 = {
      "Testcase": [{
          "apiName": " demoAPIname1",
          "request": "req",
          "response": " res"
        },
        {
          "apiName": " demoAPI name2",
          "request": " req",
          "response": "res"
        }

      ]
    };

    var projectBody1 = document.createElement("div");
    for (var propt1 in prod1) {
      var projectBody2 = document.createElement("div");
      var project1 = prod1[propt1];

      for (var i in project1) {
        var temp = document.createElement("div");
        var apiname = project1[i].apiName;
        var request1 = project1[i].request;
        var response1 = project1[i].response;

        var t1 = document.createElement("div");
        var r1 = document.createElement("div");
        var t2 = document.createElement("div");
        var r2 = document.createElement("div");
        r1.innerHTML = request1;
        r2.innerHTML = response1;
        t1.appendChild(createPanel("request", r1, "apidata"));
        t2.appendChild(createPanel("response", r2, "apidata"));

        temp.appendChild(t1);
        temp.appendChild(t2);

        projectBody2.appendChild(createPanel(apiname, temp, "apipanel"));
      }

    }
    projectBody1.appendChild(createPanel("apiinfo", projectBody2, "apititle"));

    var accordion4 = event.currentTarget; //THIS LINE I AM ASSIGNING MY current element
    accordion4.appendChild(projectBody1);

    var allPanelElems4 = accordion4.querySelectorAll(".panel");
    for (var i = 0, len = allPanelElems4.length; i < len; i++) {
      allPanelElems4[i].addEventListener("click", handlePanelClick);
    }
    event.currentTarget.classList.add("active");
  }

  event.stopPropagation();
}

Answer 1

我的意思是听起来很愚蠢，但是您不能在添加新元素之前清除元素的孩子吗？所以它只会存在一次？

element.innerHTML = "";
...
...
element.appendChild(child);

如果速度很重要：Children removal ...听起来xD不好

或者您可以检查孩子人数是否大于1

if(div.childNodes.length > 1) return

检查特定ID

let children = Array.from(div.childNodes);
for(let i = 0; i < children.length; i++) {
    if(children[i].id == "onlyOnce") return;
}
// Append child then as following: 
let childElement = document.createElement("div");
childElement.id = "onlyOnce";
div.appendChild(childElement);

编辑：

问候伊莱亚斯：D

有没有一种方法可以使单击元素数组时在javascript函数内添加的元素仅添加一次？

1 个答案: