0

一个带有类的 div 框分别包含带有 ID和.my-row的添加和删除按钮。Jquery 用于在单击按钮时克隆 div 框并使用按钮删除 div 框。我想要在添加和删除 div 框时淡入和淡出动画。#add-row#remove-row#add-row#remove-row

HTML：

<div id="my-field">
   <div class="grey-field">

//box i want to clone 
  <div class="my-row">
  <a id ="add-row" class="button"></a>
  <a id ="remove-row" class="button"></a>
  </div>


   </div>
 </div>

jQuery

$('#add-row').on('click', function() {
        var row = $('.my-row').clone(true);
        row.removeClass('my-row');
        row.insertBefore('#my-field .grey-field>div:last');
        return false;
   });

 $('#remove-row').on('click', function() {
        $(this).closest("div").fadeOut(600, function(){
        $(this).remove();
        });
        return false;
    });
4

3 回答 3

1

我在这个jsfiddle中发布了我的答案

$('.add-row').on('click', function() {
    var row = $('.my-row').clone(true);
    row.removeClass('my-row');
    row.insertBefore('#my-field .grey-field>div:last').hide().fadeIn(600);
    return false;
});

$('.remove-row').on('click', function() {
    $(this).closest("div").fadeOut(600, function(){
    $(this).remove();
    });
    return false;
});

我冒昧地将您的 id 引用更改为类标识符，原因如下jQuery API所述：

注意：使用 .clone() 具有产生具有重复 id 属性的元素的副作用，这些属性应该是唯一的。在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。

于 2013-07-03T00:55:00.113 回答
1

js：

$('.add-row').on('click', function() {
    var row = $(this).parent().clone(true);
    row.removeClass('my-row').css('display','none'); // I suggest you don't remove the class here because you might need it later
    row.insertBefore('#my-field .grey-field>div:last').fadeIn('slow'); // here you are inserting before the last element, maybe that's how you want it
        return false;
   });

 $('.remove-row').on('click', function() {
        $(this).parent().fadeOut(600, function(){
        $(this).remove();
        });
        return false;
    });

html:

<div id="my-field">
   <div class="grey-field">
      <!--box I want to clone -->
      <div class="my-row">
          <a class ="button add-row">11</a>
          <a class ="button remove-row">22</a>
      </div>
   </div>
 </div>

演示

于 2013-07-03T01:10:28.940 回答
0

如果我没看错你的问题，当你点击它并淡出 ID 删除行时，你想用 ID 淡入任何东西，而不是类，添加行。ID 用“#”表示，而类用“.”表示。检查您的 HTML 以确保它是一个类或 ID，因为这可能是它不起作用的原因

于 2013-07-03T00:24:52.917 回答