附加和滑动在一起 jQuery

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('');    
    }
});

虽然，这样也不错。但是，我想在附加时实现幻灯片，我尝试这样做：

$('.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');
    }
});

原因是每个链接输入都会获得第二类形式的 ID，这对于如果您不小心添加了多个需求，并且想要删除某个元素，请选择它们。我还在 add-link 元素上添加了淡出效果，这样用户就不会因为它刚刚消失而感到困惑。当然，这只是个人喜好的问题，但我觉得它更人性化。

希望这有帮助。