php - Jquery 我想要在每次点击时一次又一次地产生相同的效果

Question

我在下面附加了我的jquery代码。当我点击+链接时，一个文本框应该向下滑动，工作正常。但是我希望再次和每次点击+时都有相同的效果。希望任何人都可以帮助我
Jquery



<pre><code>$(".more_button").click(function(){
$("#topping_more").slideDown();
});
**Html Code**

<div class="display_none" id="topping_more">
<p>
<label></label>
<input type="text" name="topping" maxlength="50" class="validate[required]" value="<?php //echo set_value('topping',$this->form_data->topping);?>"/>
<span><strong>price</strong></span>
<input style="width:80px;" type="text" name="price" maxlength="50" class="validate[required]" value="<?php //echo set_value('menu_item',$this->form_data->menu_item);?>"/>
</p>
</div>
<p>
<a style="margin-left:650px;" id="add_more" class="more_button fl"> + </a>
</p>
</code></pre>



我想要同样的这种效果http://jsfiddle.net/7yU3n/ ...但是当我再次单击添加时，相同的 已添加 应该位于之前的已添加

之下

Answer 1

使用 clone() 克隆输入并使用 appendTo 将其添加到 block 中

HTML

 <div id="displayblock"> //add this block in your html
    <div class="display_none" id="topping_more">
    ....
    </div>
 </div>

JQUERY

$(".more_button").click(function(){
   $("#topping_more").clone().appendTo('#displayblock').slideDown();
});​

这是fiddle

<小时/>

已更新

JQUERY

 var clickedcount = 1; 
 $(".more_button").click(function(){            
   $("#topping_more").clone().attr('id','topping_more'+clickedcount).appendTo('#displayblock');

   var newSpan = $('<span>',{
                 class:"close",
                 text:"close"

             });
   newSpan.appendTo($('#topping_more'+clickedcount).find('p'));
   $('#topping_more'+clickedcount).slideDown();
   clickedcount++;
 });

 $('#displayblock').on('click','.close',function(){
    $(this).parent().slideUp('slow',function(){
        $(this).parent().remove();
  });
});

新fiddle这里