27

我有这个追加方法，我用它来添加更多输入框，直到有 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 的解决方案一样，但仅在一行中使用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都会以第二类的形式获得一个 ID，这对于选择它们非常方便，以防人们想要删除一个元素，如果一个人不小心添加了多个需求。我还在元素上添加了淡出效果，add-link这样用户就不会因为它刚刚消失而感到困惑。当然，这只是个人品味的问题，但我觉得它更人性化。

希望这可以帮助。

于 2010-09-19T22:30:45.863 回答