将 jQuery 附加和滑动在一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3747683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Append and Slide together jQuery
提问by MacMac
I have this append method which I made to add more input boxes until there is 10 of them which will disable into making more.
我有这个 append 方法，我用它来添加更多的输入框，直到有 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('');
}
});
Although, it's good. However, I want to implement a slideDown when appended, I've tried doing this:
虽然，这很好。但是，我想在附加时实现 slideDown，我试过这样做：
$('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>').slideDown("fast");
Which doesn't work at all.
这根本不起作用。
回答by Chris Laplante
append()returns a reference to the original selector, not what was appended. I think you are looking for this:
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");
Live demo:
现场演示：
回答by saschoar
Like SimpleCoder's solution, but in only one line using appendTo():
类似于 SimpleCoder 的解决方案，但仅在一行中使用appendTo()：
$('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>').appendTo($('.insert-links')).slideDown("fast");
回答by Valentin Flachsel
Although SimpleCoder's solution is perfectly valid, I'd do it like this:
尽管 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');
}
});
The reason for it would be that each link inputwould get an ID in the form of a second class, which would come very handy for selecting them in case one wants to remove an element, should one accidentally add more than one needs. I have also added a fade out effect on the add-linkelement so the user doesn't get confused that it just disappeared. Of course, it is just a matter of personal taste, but I find it more user-friendly.
这样做的原因是每个链接input都会以第二个类的形式获得一个 ID，这对于选择它们非常方便，以防万一人们想要删除一个元素，如果一个人不小心添加了多个需求。我还在add-link元素上添加了淡出效果，因此用户不会因为它刚刚消失而感到困惑。当然，这只是个人品味的问题，但我觉得它更人性化。
Hope this helps.
希望这可以帮助。
