Jquery我想要在每次點擊時反復出現相同的效果

Question

我在下面添加我的jquery代碼。當我點擊+鏈接時，一個文本框應該滑動，工作正常。但是我想要再次相同的效果，每次點擊+。希望任何人都可以幫我Jquery

 $(".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> 

我想要同樣的這種效果http://jsfiddle.net/7yU3n/ ...但是當我再次點擊添加相同時添加應該是以前添加的 der

Answer 1

我不知道你想要的掃描儀，但是如果你想在每次點擊時上下晃動這段代碼

$(".more_button").click(function(){

    if($("#topping_more").css('display')=='hide'){    
          $("#topping_more").slideDown();
    }else{
          $("#topping_more").slideUp();
}

    });

此代碼用於每次滑動....

$(".more_button").click(function(){
$("#topping_more").slideUp();
$("#topping_more").slideDown();
});

Answer 2

使用clone()克隆輸入並使用appendTo將其添加到塊中

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();
});​

這是小提琴

---

更新

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();
  });
});

這里有新的小提琴

Answer 3

您也可以克隆p標簽並將其附加到div，如下所示。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".more_button").click(function(e)
        {
            e.preventDefault();
            $("#topping_more").slideDown();
            var clone = $("#topping_more p:first").clone();
            $("#topping_more").append(clone);

            //also do below
            var clone = $("#topping_more p:first").clone();
            clone.appendTo("#topping_more").slideDown('slow');
            //also above will work
        });
    });
</script>

<div class="display_none" id="topping_more" style="display:none;">
  <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" href="#"> ADD </a>
</p>

為了回應你的評論你也可以給p標簽樣式顯示無和appendTo div並向下滑動然后你第一次點擊時看不到兩個p。