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>

$(".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/ ...但是当我再次点击添加相同的添加应该在之前的添加

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

这是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此处

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。

Jquery我想要在每次点击时反复出现相同的效果

3 个答案: