0

クラスを持つ div ボックスには、それぞれ IDと.my-rowID を持つ追加ボタンと削除ボタンが含まれています。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

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 に答える
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;
});

jQuery APIから以下に示す理由により、代わりに id 参照をクラス識別子に変更する自由を取りました。

注: .clone() を使用すると、重複した id 属性を持つ要素が生成されるという副作用があり、これらは一意であるはずです。可能であれば、この属性を使用して要素を複製したり、代わりにクラス属性を識別子として使用したりすることは避けることをお勧めします。

于 2013-07-03T00:55:00.113 に答える