Append and Slide together jQuery

前端 未结 3 422
执笔经年
执笔经年 2021-02-03 23:03

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.

i = 0;
$(\'#add-link\').click(funct         


        
相关标签:
3条回答
  • 2021-02-03 23:43

    Although SimpleCoder's solution is perfectly valid, I'd do it like this:

    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 input would 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-link element 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.

    Hope this helps.

    0 讨论(0)
  • 2021-02-03 23:45

    append() returns a reference to the original selector, not what was appended. I think you are looking for this:

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

    0 讨论(0)
  • 2021-02-03 23:47

    Like SimpleCoder's solution, but in only one line using 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/

    0 讨论(0)
提交回复
热议问题