web-dev-qa-db-fra.com

Ajouter et faire glisser ensemble jQuery

J'ai cette méthode d'ajout que j'ai faite pour ajouter plus de boîtes de saisie jusqu'à ce qu'il y en ait 10 qui se désactiveront pour en faire plus.

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

Mais c'est bon. Cependant, je veux implémenter un slideDown lorsqu'il est ajouté, j'ai essayé de faire ceci:

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

Ce qui ne fonctionne pas du tout.

jqueryappendslidedownjquery-effects
26
MacMac

Comme la solution de SimpleCoder, mais en une seule ligne utilisant appendTo():

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

Démo: http://jsfiddle.net/V4SVt/336/

31
saschoar

append() renvoie une référence au sélecteur d'origine, pas ce qui a été ajouté. Je pense que vous cherchez ceci:

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

Démo en direct:

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

38
Chris Laplante

Bien que la solution de SimpleCoder soit parfaitement valide, je le ferais comme ceci:

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

La raison en serait que chaque lien input obtiendrait un ID sous la forme d'une deuxième classe, ce qui serait très pratique pour les sélectionner au cas où l'on voudrait supprimer un élément, si l'on ajoutait accidentellement plus de on a besoin. J'ai également ajouté un effet de fondu sur le add-link élément afin que l'utilisateur ne soit pas confus qu'il vient de disparaître. Bien sûr, c'est juste une question de goût personnel, mais je le trouve plus convivial.

J'espère que cela t'aides.

3
Valentin Flachsel