Sujet Précédent Sujet Suivant

Comment ajouter une classe [Résolu]

Signaler
-
 DADYY87 -
Bonjour,

J'essaie de rajouter une classe à partir d'un each pour que le nom de la classe soit modifié à chaque fois qu'on rajoute une ligne et donc que ce ne soit pas le même nom après chaque ajout de ligne.
Voici mon code : 
$(".btn-new").on('click', function (){
        var i = 0;
        $(".btn-new").each(function (){
            $("#uploader2").append('<div class="row uploadDoc"><div class="col-sm-4 order-1 order-sm-0"><div class="docErr">Veillez upload au format pdf, jpg, jpeg, png</div><!--error--><div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" name="file[]" class="upload up" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" required/><div class="invalid-feedback">Document obligatoire</div></div></div><div class="col-sm-1 order-2 order-sm-1"><div class="pos_croix"><a href="#" id="add-class"><i class="fas fa-times fa-xs" style="color:red;"></i></a></div></div><div class="col-sm-6 order-0 order-sm-2"><input type="text" class="form-control" name="test[]" placeholder="Veuillez preciser le document que vous ajoutez" required pattern="^[A-Za-z -]+$"><div class="invalid-feedback">Veuillez saisir le document que vous souhaitez ajouter.</div></div></div>');
            document.getElementById('add-class').addClass('test'.i);
            i++;
        });

        $(document).on("click", "a.test2", function (){
            $(this).closest(".uploadDoc").remove();
        });

    });


La ligne se rajoute bien par contre pour la partie addClass aucune action ne s'effectue je ne comprends pas pourquoi...

Je suis pas très fort en js j'espère que quelqu'un pourra m'aider.

3 réponses

Réponse 1 / 3
Messages postés
33033
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2021
 3 582
Bonjour,

La concaténation en Javascript se fait avec le signe + et pas le .
Réponse 2 / 3

Bonjour Jordane45,

Je m'en suis rendu compte quand j'ai fait d'autres testes.
Du coup mon code est le suivant : 
 var i = 1;
        $(".btn-new").each(function (){
            var name = 'test' + i;
            $("#uploader2").append('<div class="row uploadDoc"><div class="col-sm-4 order-1 order-sm-0"><div class="docErr">Veillez upload au format pdf, jpg, jpeg, png</div><!--error--><div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" name="file[]" class="upload up" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" required/><div class="invalid-feedback">Document obligatoire</div></div></div><div class="col-sm-1 order-2 order-sm-1"><div class="pos_croix"><a href="#" id="add-class" class='+name+'><i class="fas fa-times fa-xs" style="color:red;"></i></a></div></div><div class="col-sm-6 order-0 order-sm-2"><input type="text" class="form-control" name="test[]" placeholder="Veuillez preciser le document que vous ajoutez" required pattern="^[A-Za-z -]+$"><div class="invalid-feedback">Veuillez saisir le document que vous souhaitez ajouter.</div></div></div>');
            i++;
        });


J'ai réussi à nommer ma classe pour le premier mais pour le reste le nom est le même j'ai l'impression que ça n'incrémente pas correctement ...
Signaler
Messages postés
33033
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2021
 3 582
déjà, pense à mettre les quotes 
class="'+name+'"

Ensuite, tu as mis ton code où ?
Ton var i doit se trouver en dehors de ta fonction.. sinon ça remet à 1 la variable i
Réponse 3 / 3

J'ai du coup modifié en mettant en dehors le "var i". Et cette fois-ci ça fonctionne !
Voici le code : 
var i = 0;
        $("#change-class").each(function (){
            i++;
        });

        var name = 'eff' + i;
        $("#uploader2").append('<div class="row uploadDoc"><div class="col-sm-4 order-1 order-sm-0"><div class="docErr">Veillez upload au format pdf, jpg, jpeg, png</div><!--error--><div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" name="file[]" class="upload up" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" required/><div class="invalid-feedback">Document obligatoire</div></div></div><div class="col-sm-1 order-2 order-sm-1"><div class="pos_croix"><a href="#" id="change-class" class="' + name +'"><i class="fas fa-times fa-xs" style="color:red;"></i></a></div></div><div class="col-sm-6 order-0 order-sm-2"><input type="text" class="form-control" name="test[]" placeholder="Veuillez preciser le document que vous ajoutez" required pattern="^[A-Za-z -]+$"><div class="invalid-feedback">Veuillez saisir le document que vous souhaitez ajouter.</div></div></div>');


merci pour votre aide ^^
Répondre Posez votre question