1

jQueryクローンを使用してクローンを作成しているいくつかの異なるタイプの入力があります。name属性の先頭の数字は、クローンを作成するときに入力ごとに増やすことができますか？ラジオボタンの名前を各増分後に同じに保ちながら、グループ化されたままになるように、これを理解しようとしています。

これが私がクローンを作成していることを確認するためのフィドルです。

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 に答える