Question

我试图克隆一个具有我通过JS设置的特定属性的元素。代码：

HTML

<div id="container">
  <div class="test" data-test></div>
  <div class="test" data-test data-cloneable></div>
  <div class="test" data-test></div>
</div>

<div>
  <button data-tool="clone">Clone</button>
</div>

其中一个元素具有data-cloneable属性，我正在用JS检查：

的JavaScript

var container = document.getElementById("container");
var elements = document.querySelectorAll("[data-test]");

Array.prototype.forEach.call(elements, function(element) {

 cloneTool = document.querySelector("[data-tool='clone']");
 cloneTool.onclick = function() {
   var clone = element.cloneNode(true);
   if(element.hasAttribute("data-cloneable")) {
     container.appendChild(clone);
   }
 };

});

它没有用，啊，或多或少，问题是命令只克隆容器中的最后一个元素而不是特定元素。

Answer 1

这样的东西？或者你的意思是克隆会出现在它的原点之下吗？

http://jsfiddle.net/omikey/nupc7htn/2/

var cloneTool = document.querySelector("div[data-cloneable='true']");
cloneTool.onclick = function(clone) {
  var node = this.cloneNode(true);
  var container = document.getElementById('container');
  container.appendChild(node);
};

<div id="container">
  <div class="test">1</div>
  <div class="test" data-cloneable="true">2</div>
  <div class="test">3</div>
</div>

Answer 2

您的代码的一个问题是事件注册，因为您在每次迭代中使用onclick属性，而是覆盖先前分配的点击处理程序。

所以在循环结束时，唯一存在的处理程序是与最后一个data-test元素对应的处理程序，当触发时它没有data-clonable属性，所以没有任何反应。

你的意思是

var container = document.getElementById('container');

var cloneTool = document.querySelector("[data-tool='clone']");
cloneTool.addEventListener('click', function() {
  var elements = document.querySelectorAll("[data-test][data-cloneable]");
  Array.prototype.forEach.call(elements, function(element) {
    container.appendChild(element.cloneNode(true));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="test" data-test>1</div>
  <div class="test" data-test data-cloneable>2</div>
  <div class="test" data-test>3</div>
</div>

<div>
  <button data-tool="clone">Clone</button>
</div>

Answer 3

您正多次注册yourTextBox.ContextMenuStrip.Items.Item(theIndexOrKeyHere).Text个活动。它只记录您分配的最后一个onclick，因为最后一个元素没有event属性，然后data-cloable始终返回element.hasAttribute("data-cloneable")。

false

使用Vanilla JS

3 个答案: