إلحاق وينزلق معا 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('');    
    }
});

على الرغم من أنه جيد. ومع ذلك ، أرغب في تنفيذ Slightedown عند الإلحاق ، لقد حاولت القيام بذلك:

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

الذي لا يعمل على الإطلاق.

Answer 1

مثل حل 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 2

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 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 سيحصل على معرف في شكل فئة ثانية ، والذي سيكون مفيدًا للغاية لاختياره في حالة رغبة المرء في إزالة عنصر ما ، في حالة إضافة أكثر من احتياجات واحدة. لقد أضفت أيضًا تأثيرًا يتلاشى على add-link العنصر حتى لا يشعر المستخدم بالارتباك بأنه اختفى للتو. بالطبع ، إنها مجرد مسألة ذوق شخصي ، لكنني أجدها أكثر سهولة في الاستخدام.

أتمنى أن يساعدك هذا.