web-dev-qa-db-ja.com

jQueryを一緒に追加およびスライドする

私は、この追加メソッドを使用して、入力ボックスを10個になるまで追加して、それらを無効にして入力ボックスを増やしました。

i = 0;
$('#add-link').click(function() 
{   
    if(i < 9)
    {
        $('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>');
        i++;
    }
    if(i == 9)
    {
        $('#add-link').html('');    
    }
});

しかし、それは良いことです。しかし、追加時にslideDownを実装したいので、これを試してみました：

$('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>').slideDown("fast");

これはまったく機能しません。

jqueryappendslidedownjquery-effects
26
MacMac

SimpleCoderのソリューションと同様ですが、appendTo()を使用した1行のみ：

$('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>').appendTo($('.insert-links')).slideDown("fast");

デモ： http://jsfiddle.net/V4SVt/336/

31
saschoar

append()は、追加されたものではなく、元のセレクターへの参照を返します。私はあなたがこれを探していると思います：

$('.insert-links').append('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>')
$('.insert-links').find(".new-link:last").slideDown("fast");

ライブデモ：

http://jsfiddle.net/V4SVt/2/

38
Chris Laplante

SimpleCoderのソリューションは完全に有効ですが、次のようにします。

i = 0;
$('#add-link').click(function() {   
    if(i < 9) {
        $('.insert-links').append('<div style="display: none;" class="new-link link_' + i + '" name="link[]"><input type="text" /></div>');
        $('.link_' + i).slideDown("fast");
        i++;
    }
    if(i == 9) {
        $('#add-link').fadeOut('200');
    }
});

その理由は、各リンクinputが2番目のクラスの形式のIDを取得するためです。これは、要素を誤って削除したい場合に、それらを選択するのに非常に便利です。一つは必要です。 add-link要素にフェードアウト効果を追加して、ユーザーが単に消えただけで混乱しないようにしています。もちろん、それは個人的な好みの問題ですが、私はそれがよりユーザーフレンドリーであると思います。

お役に立てれば。

3
Valentin Flachsel