Comment ajouter une classe

Résolu/Fermé

DADYY87 - 6 mai 2021 à 12:43
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
Ajouter un compte gmail - Guide
Comment ajouter une signature sur word - Guide
Ajouter une liste déroulante excel - Guide
Ajouter un compte whatsapp - Guide
Comment ajouter une personne sur whatsapp dans un groupe - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38263 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 octobre 2024 4 693
6 mai 2021 à 14:41

Bonjour,

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

Réponse 2 / 3

DADYY87
6 mai 2021 à 14:44

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 38263 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 octobre 2024 4 693
6 mai 2021 à 15:10

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
Modifié le 6 mai 2021 à 15:55

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

Retrouver l'image originale après avoir fait des modifications ?

Ajouter une page dans libre office

Comment savoir comment on nous a ajouté sur Snap

openoffice writer - insérer une page