Changer la classe

Dz -
Dz - 30 avril 2021 à 15:44

Bonjour,

Je cherche à changer le nom de ma classe lorsque j'appuie sur le bouton nommé "Parcourir". j'utilise la classe "upload up" lorsqu'elle a été cliqué pour faire le changement de la classe "uploadDoc" contenant l'id "change". Mais quand je réalise les étapes je ne parviens pas à faire n'importe quelles actions sur ma classe "uploadDoc". Voici le code :

$(".btn-new").on('click',function(){
       $("#uploader2").append('<div class="row uploadDoc" id="change"><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);" onclick="changeClass();" 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="#" class="test2"><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>');
   });
    
    $(".upload up").on('click', function changeClass(){
          document.getElementById('change').classList.toggle('uploadDoc');
    });

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

J'espère que quelqu'un pourra m'aider...

Afficher la suite

A voir également:

Changer la classe
Changer dns - Guide
Changer carte graphique - Guide
Changer wifi chromecast - Guide
Changer extension fichier - Guide
Changer clavier qwerty en azerty - Guide

3 réponses

Réponse 1 / 3

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

Bonjour,

Le souci c'est que tu ajoutes du HTML dynamiquement
Et donc, les EVENT qui sont liés à des id ou des class de ces nouveaux éléments n'y sont pas attachés...
Pour ça, il faut les attacher après avoir créé le nouveau contenu.
Un truc du genre:

$(".btn-new").on('click',function(){
       $("#uploader2").append('<div class="row uploadDoc" id="change"><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);" onclick="changeClass();" 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="#" class="test2"><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>');

    
    $(".upload up").on('click', function changeClass(){
          $('#change').toggleClass('uploadDoc');
    });

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

 });

Réponse 2 / 3

Merci beaucoup Jordane45, votre réponse m'a été très utile je comprends enfin pourquoi mon code ne fonctionnait pas. J'ai également un 2ème soucis sinon ça serait trop beau...
Je souhaiterai effacer le contenu lorsqu'on appuie sur la classe "test2" et remettre la classe "uploadDoc". J'arrive a remettre la classe mais en revanche pour ce qui est de supprimer le contenu et non toute la ligne je n'y parvient pas.

Voici le code qui me permet de supprimer normalement le contenu :

$(document).on("click", "a.test2", function (){
        $(".upl").eq(9).remove();
        $(".icon2").eq(9).remove();
        $(".fileUpload").eq(9).append('<img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon2"><span class="upl" id="upload">Parcourir</span><input type="file" class="upload up" name="upload1" accept="image/png, image/jpeg, .pdf" id="up" onchange="readURL(this);" />');
        document.getElementById('change').classList.toggle('uploadDoc');
    });

J'ai en tout 8 lignes qui sont affichées côté html et la ligne que je rajoute côté js est celle-ci, la 9ème. Je ne sais pas si c'est un soucis au niveau du chiffre avec "eq(9)" car le fait de remettre la classe "uploadDoc" fonctionne.

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

Bonjour
Nouvelle question = ouverture d'une nouvelle discussion propre à se souci dans le forum.
Pense à mettre celle-ci en résolue.

Dz > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

D'accord, je ne pensais pas que ça faisait partie d'une nouvelle question. Je m'en excuse.

Réponse 3 / 3

Au final je reviens ici car je me suis aperçu que lorsque j'appelle la fonction "changeClass" elle ne fonctionne finalement pas. La classe ne se modifie pas. La seule manière pour que ça fonctionne c'est la suivante :

$(document).on("click", "a.test2", function (){
        const parent = $(this).closest('.row');
        const parent2 = $(this).closest('.fileUpload');
        parent.find('.upl').remove();
        parent.find('.icon2').attr('src', 'https://image.flaticon.com/icons/svg/136/136549.svg');
document.getElementById('change').classList.toggle('uploadDoc');
    });

Le problème c'est que ce n'est pas ce que je souhaite faire. Ce que j'ai actuellement c'est lors de l'appuie du bouton effacer il change la classe puis je dois de nouveau appuyer sur effacer pour que l'action se réalise.

Ce que je veux obtenir c'est lors de l'appuie sur Parcourir (input file en gros) que le changement de classe se fasse et lorsque je supprime avec le bouton "test2" que la classe se remette.

Avec le code suivant, la fonction "changeClass" ne fonctionne pas

 $(".btn-new").on('click', function (){
        $("#uploader2").append('<div class="row uploadDoc" id="change"><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);" onclick="changeClass();" 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="#" class="test2"><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>');

        $(".upload up").on('click', function changeClass(){
            $('#change').toggleClass('uploadDoc');
        });

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

    });

Je suis désolé d'être allé trop vite tout à l'heure...

Discussions similaires

Code source couleur de fond

Votre réponse

Discussions similaires