Question

我制作克隆功能和文本计数器，它应该在我克隆的每个新框中包含一个新的数字附加，我的代码下面克隆元素但新元素总是引用第一个来源和计数器的数字总是在第一个框中写入新的数字，第一个框总是将数字从1写入最新的计数器编号。是不是可以用javascript完成它？我非常感谢你的帮助。

＆＃13;

var container = document.querySelector(".container");
var deleteBtn = document.querySelector(".delete");
var box = document.querySelector(".box");
var counter = 0;

container.addEventListener('click', function({target}) {
  if (target.nodeName = 'BUTTON' && target.classList.contains('cloneBtn')) {
    counter ++;
    var text = document.createTextNode(counter);
    
    box.appendChild(text);
    const clone = target.parentNode.cloneNode(true);
    container.appendChild(clone);
  }
   
  if(target.nodeName = 'BUTTON' && target.classList.contains('deleteBtn')) {
    target.parentNode.remove(target)
  }
})

＆＃13;

.container {
  border: 1px solid black;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="cloneBtn">Clone</button>
      <button class="deleteBtn">Delete</button>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 1

如果我理解正确，问题是您将计数器值始终附加到初始.box元素，您希望将其附加到克隆元素，因此您将看到新的计数器值克隆元素：

var container = document.querySelector(".container");
var deleteBtn = document.querySelector(".delete");
var box = document.querySelector(".box");
var counter = 0;

container.addEventListener('click', function({target}) {
  if (target.nodeName = 'BUTTON' && target.classList.contains('cloneBtn')) {
    counter++;
    var text = document.createTextNode(counter);
    // box.appendChild(text);  <---- WRONG
    const clone = box.cloneNode(true); // <-- Here clone the initial box instead target to avoid stacking of text nodes
    clone.appendChild(text);
  //^^^^^^^^^^^^^^^^^ here append to the cloned element 
    container.appendChild(clone);
  }
   
  if(target.nodeName = 'BUTTON' && target.classList.contains('deleteBtn')) {
    target.parentNode.remove(target)
  }
})

.container {
  border: 1px solid black;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="cloneBtn">Clone</button>
      <button class="deleteBtn">Delete</button>
    </div>
  </div>
</body>
</html>

Answer 2

您的代码中存在许多逻辑错误：您在克隆之前附加文本，这就是显示序列错误的原因。您也可以按类选择，但所有克隆的框将具有相同的类，结果是一团糟。我建议使用ID并将计数器附加到新创建/克隆元素的ID。并且，最终，使用委托将相同的事件挂钩到多个元素。

如何克隆元素并在javascript中附加一个唯一的新子节点

2 个答案: