0

ボタンが押されるたびに最大 10 個の新しいフィールドを表示しようとしています。

私は現在、次のものしか持っていません。

$('.add_field').live('click', function(){
    $(this).next('.field1').fadeIn();
    return false;
});

HTML:

 <fieldset>
     <label>Label Name</label>
     <input id="field1" name="field1" type="text">
</fieldset>
<fieldset>
     <label>Label Name</label>
     <input id="field2" name="field2" type="text">
</fieldset>
...
<a class="add_field" href="#">Add Field</a>

フィールドを表示するだけで動的に追加する必要はありません。それらはすべて HTML 内にあり、非表示になっています。ボタンを押すたびにリストの次のフィールドだけを表示する方法がわかりません。これらの各フィールドには一意の番号がありますが、ボタンを押すたびにカウントを増やして表示する方法がわかりません。

前もって感謝します！

4

2 に答える 2

2

投稿された HTML で - DEMO

$('.add_field').on('click', function(e){
    e.preventDefault();
    $('fieldset:hidden').eq(0).fadeIn();
});
于 2013-01-08T23:23:05.750 に答える
1

更新しました

これは、最近投稿された HTML レイアウトに適合する私のコードの更新バージョンです。アイデアは同じです: クリックすると、最初の隠し要素を見つけて表示します。

$('.add_field').click(function(evt){
  $("fieldset:hidden:eq(0)").fadeIn();
  evt.preventDefault();
});

前

:hiddenセレクターと を組み合わせて使用​​できます.nextAll()。

$('.add_field').click(function(evt){
  $(this).nextAll(':hidden').eq(0).fadeIn();
  evt.preventDefault();
});

そのような隠れた次の兄弟が存在する限り。

于 2013-01-08T23:18:59.573 に答える