javascript - 在jQuery中使用clone()更新id并将加号按钮更改为减号按钮

Question

当我在 StackOverflow 上搜索克隆函数时，我得到了很多例子。但我以不同的方式使用它。

当我单击“+”按钮时，它必须克隆整个 div，并且对于所有行，第一个 div“+”图标必须更改为“-”。引用图片如下。

这是我的 HTML 代码

<div class="container-fluid cloned-row">
<div class="row-fluid">    
    <div class="col-xs-12">
        <div id="div_form1">
            <input type = "text" id="txt_fname" name="txt_fname" placeholder="First Name"/>
            <select id="opt_sel" name="opt_sel">
                <option value="default">
                    Select
                </option>
                <option value="banana">
                    Bananana
                </option>
            </select>   
            <button id="btn_sub" class="plus"></button>
        </div>
    </div>
</div>

这是我的 JavaScript 代码

var i=1;
$("#btn_sub").click(function (){
  $(".cloned-row:first").clone().insertAfter(".cloned-row:last")each(function() {
     $(this).attr({
      'id': function(_, id) { return id + i },
      'name': function(_, name) { return name + i },
      'value': ''               
   });     
  });
  i++;
 });

这是我的 JS Fiddle Link

由于我是 jQuery 新手，我在克隆功能方面遇到了很多困难。另外，我不明白为什么没有生成动态 ID。

Answer 1

您可以使用 CSS 更轻松地显示/隐藏元素。例如，如果您向每行添加加号和减号:

<button class="plus"></button>
<button class="minus"></button>

这将显示所有内容的减号，但最后一行的加号:

.cloned-row .plus {
     display: none;
}

.cloned-row:last-child .minus {
    display: none;
}

.cloned-row:last-child .plus {
    display: inline-block;
}

然后使用事件委托(delegate)将 .plus 上的任何点击处理为“添加行”

演示:http://jsfiddle.net/4u9ud167/4/