Question

我有这个追加方法，我添加了更多输入框，直到有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");

根本不起作用。

Answer 1

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/

Answer 2

与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/

Answer 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都会以第二个类的形式获得一个ID，这对于选择它们非常方便，以防一个人想要删除一个元素，如果一个人意外添加不止一个需求。我还在add-link元素上添加了淡出效果，因此用户不会感到困惑它只是消失了。当然，这只是个人品味的问题，但我发现它更加用户友好。

希望这有帮助。

追加和滑动jQuery

3 个答案: