Sujet Précédent Sujet Suivant

Changer la classe

Fermé
Dz - 30 avril 2021 à 10:59
 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...

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
30 avril 2021 à 11:05
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();
  });

 });

1
Réponse 2 / 3
Dz
30 avril 2021 à 11:19
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.
0
jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
Modifié le 30 avril 2021 à 11:57
Bonjour
Nouvelle question = ouverture d'une nouvelle discussion propre à se souci dans le forum.
Pense à mettre celle-ci en résolue.
0
Dz > jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024
30 avril 2021 à 12:55
D'accord, je ne pensais pas que ça faisait partie d'une nouvelle question. Je m'en excuse.
0
Réponse 3 / 3
Dz
30 avril 2021 à 15:44
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...
0

Discussions similaires

my.canalbox.africa changer le mot de passe
Thierry973 -
baladur13 -

16 réponses