1

我有几种不同类型的输入，我正在使用 jQuery 克隆进行克隆。克隆时，每个输入的名称属性开头的数字是否可以递增？我一直试图弄清楚这一点，同时在每次增量后保持单选按钮的名称相同，以便它们保持组合在一起。

这是一个小提琴，可以看到我正在克隆的那个。

http://jsfiddle.net/aHA2d/

这是我的 HTML

<div class="container">
  <input type="radio" name="1_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="1_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="2_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="3_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="4_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="5_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="5_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="6_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​

这是我用来创建克隆的 JavaScript

$(document).ready(function() {
    $('.btnAdd').click(function() {
        var c = $('.container:first').clone(true);   
        $('.container:last').after(c);            
    });        
});​

这是我在克隆一次 div 标签后尝试创建的 HTML 示例。

<div class="container">
  <input type="radio" name="1_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="1_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="2_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="3_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="4_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="5_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="5_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="6_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​
<div class="container">
  <input type="radio" name="7_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="7_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="8_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="9_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="10_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="11_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="11_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="12_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​
4

1 回答 1

2

尝试这个：

$(document).ready(function() {
    $('.btnAdd').click(function() {
        var b = $('.container [name]').length;
        var c = $('.container:first').clone().find('[name]').attr('name', function(i, cur) {
            var n = cur.match(/\d+/g).join('');
            var s = cur.match(/\D+/g).join('');
            return (b + ++n) + s;
        }).end()
        $('.container:last').after(c);
    });
});​

http://jsfiddle.net/8E3sC/

由于克隆按钮是动态生成的，您应该委托事件：

$(document).on('click', '.btnAdd', function() { // ...  })
于 2012-09-18T14:47:52.630 回答