16

これが私のhtmlです：

<div id="extraPerson">
    <div class="controls controls-row">
      <input class="span3" placeholder="First Name" type="text" name="firstname2">
      <input class="span3" placeholder="Last Name" type="text" name="lastname2">     
         <select class="span2" name="gender2"><option value="Male">Male</option><option           value="Female">Female</option></select>   
        ...ETC
    </div>
</div>

<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>

そして、これは私のjqueryです：

<script>
    $(document).ready(function(){
        $('#addRow').click(function(){
            $("#extraPerson").slideDown();
         });
    })
</script>

#extraPerson は css に隠されています。

リンクがクリックされると、div が追加されます。ただし、リンクがクリックされるたびに同じ div を追加し続けたいと思います。どうすればいいですか？フォームの入力名に番号を追加するとさらに良いでしょう。例: firstname3、firstname4 など。

4

3 に答える 3

5

私は独自の解決策を思いつきました。コメントが多いですが、お気軽にどうぞ。

$(document).ready(function(){
        $('#addRow').click(function(){
            // get the last person and html html
            var $person = $('.person').last();
            var person = $person.html();
            // find the number
            var index = person.indexOf('firstname');
            var number = parseInt(person.substring(index+9,1));
            var next = number+1;
            // replace the number
            // for firstname
            person.replace('firstname'+number, 'firstname'+next);
            // for lastname
            person.replace('lastname'+number, 'lastname'+next);
            // for gender
            person.replace('gender'+number, 'gender'+next);
            // insert the new person after the last one
            $person.after($('<div class="person">'+person+'</div>'));            
            // get the new person
            var $new = $('.person').last();
            // hide it
            $new.hide();
            // reset the values
            $new.find('input, select').val('');
            // fade it in
            $new.slideDown();
         });
    })

@PSL がテンプレートを使用しているという事実が気に入っていますが、より簡単なソリューションになる可能性があります。そこにある個人番号を更新するには、コードを追加する必要があることに注意してください...

フィドル: http://jsfiddle.net/Mk7MQ/

于 2013-05-24T23:12:33.807 に答える