Nối và Trượt cùng nhau jQuery

Question

Tôi có phương thức chắp thêm này mà tôi đã tạo để thêm nhiều hộp nhập liệu hơn cho đến khi có 10 ô trong số đó sẽ vô hiệu hóa để tạo nhiều hơn.

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

Mặc dù, rất tốt. Tuy nhiên, tôi muốn triển khai slideDown khi được thêm vào, tôi đã thử thực hiện việc này:

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

Không hoạt động.

Answer 1

giải pháp Giống như SimpleCoder, nhưng chỉ trong một dòng sử dụng appendTo():

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

Demo: http://jsfiddle.net/V4SVt/336/

Answer 2

append() trả về tham chiếu đến bộ chọn gốc, chứ không phải nội dung được thêm vào. Tôi nghĩ rằng bạn đang tìm kiếm này:

$('.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:

http://jsfiddle.net/V4SVt/2/

Answer 3

Mặc dù giải pháp SimpleCoder là hoàn toàn hợp lệ, tôi muốn làm điều đó như thế này:

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

Lý do là mỗi liên kết input sẽ nhận được ID dưới dạng lớp thứ hai, sẽ rất tiện dụng để chọn chúng trong trường hợp một người muốn loại bỏ một phần tử, nếu một người vô tình thêm nhiều hơn một nhu cầu. Tôi cũng đã thêm hiệu ứng mờ dần trên phần tử add-link để người dùng không bị lẫn lộn vì nó biến mất. Tất nhiên, nó chỉ là vấn đề sở thích cá nhân, nhưng tôi thấy nó thân thiện với người dùng hơn.

Hy vọng điều này sẽ hữu ích.