Question

我正在尝试克隆文档中的链接，并在单击添加按钮时附加到div。

实际上我保持一个循环，在该循环中每个元素需要计算数字并需要添加类，但它不起作用。

从最后一次元素点击开始连续的数字。

输出错误：

<div id="parent">    
  <a class="clicker Hi0 Hi1 Hi2" href="#">Click me</a> //it should Hi1,Hi2,Hi3
  <a class="clicker Hi0 Hi4 Hi5" href="#">Click me</a>//it should Hi1,Hi2,Hi3
  <a class="clicker Hi1 Hi2 Hi3" href="#">Click me</a>//it should Hi1,Hi2,Hi3
</div>

当我第一次点击时，我会收到一个链接，但第二次我会收到3个按钮。

这是我的代码：

var multiClicker = function() {

  var clicker = $('.clicker').clone();
  var i = 0;
  clicker.click(function() {
    $(this).addClass('Hi' + i++);
  });

  clicker.appendTo('#parent');

}

$('button').click(function() {
  multiClicker();
})

#parent {
  border: 1px solid red;
  height: 200px;
}
a.clicker {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent">

</div>
<a class="clicker" href="#">Click me</a>

<div>
  <button>Make Clicker</button>
</div>

Answer 1

您插入多个clickme链接的原因是您的选择器位于也被克隆的类中。

以下是多次点击我链接的解决方案（将克隆选择器更改为id）

var clicker = $('#clicker').clone();

http://jsfiddle.net/7ooz6p9g/3/

Answer 2

问题是行$('.clicker').clone()。因为你已经在DOM中添加了几个，所以你要克隆所有这些而不仅仅是原始的。另外，如果您希望课程从"Hi1"开始，请从i=1开始。试试这个：

var originalClicker = $('.clicker');

var multiClicker = function () {

    var clicker = originalClicker.clone();
    var i = 1;
    clicker.click(function() {
        $(this).addClass('Hi' + i++);
    });

    clicker.appendTo('#parent');
};

$('button').click(function(){
    multiClicker();
});

或者，如果您想要更好的代码，可以将其简化为：

var originalClicker = $('.clicker');

$('button').click(function () {

    var clicker = originalClicker.clone();
    var i = 1;
    clicker.click(function() {
        $(this).addClass('Hi'+i++);
    });

    clicker.appendTo('#parent');

});

以下是您演示的更新链接：http://jsfiddle.net/7ooz6p9g/4/

如何克隆和添加click事件作为单独的元素 - 没有闭包

2 个答案: