Comment ajouter une classe

Résolu

DADYY87 -
DADYY87 - 6 mai 2021 à 15:52

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.

A voir également:

Comment ajouter une classe
Comment ajouter une signature sur word - Guide
Ajouter une liste déroulante excel - Guide
Ajouter une application au démarrage - Guide
Comment ajouter un compte facebook - Guide
Impossible d'ajouter un ami sur facebook - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746

Bonjour,

La concaténation en Javascript se fait avec le signe + et pas le .

Réponse 2 / 3

DADYY87

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 ...

jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention 4 746

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

DADYY87

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 ^^

Discussions similaires

Comment savoir comment on nous a ajouté sur Snap

openoffice writer - insérer une page

Je n'arrive pas à ajouter un ami sur Facebook

Votre réponse

Discussions similaires