27

このappendメソッドを使用して、入力ボックスが10個になるまで入力ボックスを追加しました。これにより、入力ボックスが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");

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

4

3 に答える 3

39

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/

于 2010-09-19T22:19:01.883 に答える
35

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

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

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

于 2013-01-03T18:29:10.033 に答える
3

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、ユーザーが要素が消えただけだと混乱しないようにしました。もちろん、それは個人的な好みの問題ですが、私はそれがよりユーザーフレンドリーだと思います。

お役に立てれば。

于 2010-09-19T22:30:45.863 に答える