Sujet Précédent Sujet Suivant

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.

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
6 mai 2021 à 14:41
Bonjour,

La concaténation en Javascript se fait avec le signe + et pas le .
0
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 ...
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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
0
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 ^^
0

Discussions similaires

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

9 réponses
Ajouter une page dans libre office
Technoinfo -
nouki -

9 réponses