Добавить и сдвинуть вместе jQuery - PullRequest
Новая
       3

Добавить и сдвинуть вместе jQuery

26 голосов
/ 20 сентября 2010

У меня есть этот метод добавления, который я сделал, чтобы добавить больше полей ввода, пока не появится 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");

, который не работает вообще.

Ответы [ 3 ]

38 голосов
/ 20 сентября 2010

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/

31 голосов
/ 03 января 2013

Как и решение SimpleCoder, но только в одной строке, используя appendTo(): 

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

Демо: http://jsfiddle.net/V4SVt/336/

3 голосов
/ 20 сентября 2010

Хотя решение 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 получит идентификатор в виде второго класса, что очень удобно для их выбора в случае, если кто-то захочет удалить элемент, если случайно добавить более нужно Я также добавил эффект затухания к элементу add-link, чтобы пользователь не запутался в том, что он просто исчез. Конечно, это просто вопрос личного вкуса, но я нахожу его более удобным для пользователя.

Надеюсь, это поможет.

...