Comment effacer le contenu et le remplacer par un autre
Dz
-
R0b0x -
R0b0x -
Bonjour,
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 :
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.
La ligne sur laquelle je travaille la voici après quelques modifications :
J'ai cherché un autre moyen pour effacer le contenu et le remplacer par l'affichage initial avant que l'action ne soit faite voici une 2ème version :
J'arrive à faire certain truc mais je n'arrive pas à afficher "Parcourir"...
J'espère avoir était clair dans mes explications
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.
La ligne sur laquelle je travaille la voici après quelques modifications :
$(".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();
});
});
J'ai cherché un autre moyen pour effacer le contenu et le remplacer par l'affichage initial avant que l'action ne soit faite voici une 2ème version :
$(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');
// parent.find('.upl').attr('Parcourir');
// parent2.append('<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 />');
document.getElementById('change').classList.toggle('uploadDoc');
});
J'arrive à faire certain truc mais je n'arrive pas à afficher "Parcourir"...
J'espère avoir était clair dans mes explications
A voir également:
- Comment effacer le contenu et le remplacer par un autre
- Remplacer disque dur par ssd - Guide
- Remplacer un mot par un autre word - Guide
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
- Fusionner deux cellules excel en gardant le contenu - Guide
- Comment effacer un compte gmail - Guide
2 réponses
Salut,
en pur JavaScript vous passez par className et vous remplacez la chaîne de caractère par la nouvelle.
classList est la même chose(moins tolérée il me semble) et renvoi donc une chaîne de caractères(la liste des classes d'un élément séparée par un espace, exactement comme elle est écrite dans l'attribut HTML "class" d'un élément).
https://developer.mozilla.org/fr/docs/Web/API/Element/classList
https://developer.mozilla.org/fr/docs/Web/API/Element/className
Là vous utilisez la méthode JQuery.toggle qui agit sur un élément(HTML) sur une chaîne de caractère.
https://api.jquery.com/toggle/
indique:
Vous comprenez la différence entre un objet JQuery et une chaîne de caractères?
Donc il faut faire autrement et traiter le texte en texte.
Curieux d'ailleurs que vous n'ayez pas une erreur.
Ou alors utilisez la méthode appropriée, ce que vous avez fait d'ailleurs dans votre code en utilisant .toggleClass
https://api.jquery.com/toggleClass/
en pur JavaScript vous passez par className et vous remplacez la chaîne de caractère par la nouvelle.
classList est la même chose(moins tolérée il me semble) et renvoi donc une chaîne de caractères(la liste des classes d'un élément séparée par un espace, exactement comme elle est écrite dans l'attribut HTML "class" d'un élément).
https://developer.mozilla.org/fr/docs/Web/API/Element/classList
https://developer.mozilla.org/fr/docs/Web/API/Element/className
Là vous utilisez la méthode JQuery.toggle qui agit sur un élément(HTML) sur une chaîne de caractère.
https://api.jquery.com/toggle/
indique:
$( ".target" ).toggle();
Vous comprenez la différence entre un objet JQuery et une chaîne de caractères?
Donc il faut faire autrement et traiter le texte en texte.
Curieux d'ailleurs que vous n'ayez pas une erreur.
Ou alors utilisez la méthode appropriée, ce que vous avez fait d'ailleurs dans votre code en utilisant .toggleClass
https://api.jquery.com/toggleClass/
Merci beaucoup pour ta réponse.
J'ai essayé de tenir compte de tes explications mais pour le coup je n'ai pas réussi à le faire fonctionner... J'ai l'impression que c'est plus cette ligne :
qui me pose problème que le reste...
J'ai l'impression que la fonction ne s'exécute à aucun moment.
J'ai essayé de tenir compte de tes explications mais pour le coup je n'ai pas réussi à le faire fonctionner... J'ai l'impression que c'est plus cette ligne :
$(".upload up").on('click', function changeClass(){
$('#change').toggleClass('uploadDoc');
});
qui me pose problème que le reste...
J'ai l'impression que la fonction ne s'exécute à aucun moment.
votre sélecteur étant faut il y a des chances ;)
Indique en passant par un "objet" JQuery indiqué par $ d'utiliser la classe .upload up.
Hors un nom de classe ne peut pas comporter d'espace et la classe CSS ".upload up" ne peut exister qu'en tant qu'erreur, donc ne donnera JAMAIS un résultat.
Si vous voulez sélectionner plusieurs classes il me semble(je ne suis pas expert en JQuery) qu'il y à une autre syntaxe à utiliser:
https://w3tutoriels.com/jquery/jquery-selecteurs/
https://duckduckgo.com/?q=s%C3%A9lectionner+plusieurs+%C3%A9l%C3%A9ments+en+JQuery
Ou même passer par le sélecteur CSS correct, ici tous ceux possible et ce qu'ils indiquent:
https://www.w3schools.com/cssref/css_selectors.asp
En clair soit
en utilisant la norme classique CSS ou n'importe laquelle qui est juste(donc sans espace dans un nom de classe qui sert à séparer 2 classes différentes pour un élément).
En espérant j'ai bien compris le problème. JQuery je connait un peu mais fait plus de pur JS ^parce que c'est pas toujours un avantage (JQuery) et que ça permet de mieux comprendre le raisonnement derrière(celui du créateur du programme comme celui de la logique du langage), ça revient simplement à créer ses propres fonctions plutôt qu'utiliser celles de JQuery bien pratiques toutefois par qu'elles pas mal de trucs sans avoir à les développer.
ça dépends des corconstances et des objectifs donc.
JQuery me satisfait pas surtout parce que dans pas mal de cas il va rajouter de la lenteur d''exécution surtout pour des tâches simples et/ou répétitives comme à travers une boucle destinée à l'animation graphique.
Indéniablement c'est un très bon outil JQuery et son succès pas démérité mais c'est le choix de son emploi ou pas que je critique dans certains cas ou écrire soit même quelques fonctions suffit plutôt que faire appel à une usine à gaz(même mimifié parce que n'importe quel fichier peut être mimifié de la même manière et plus il sera léger moins la mimification devient nécessaire).
$(".upload up")
Indique en passant par un "objet" JQuery indiqué par $ d'utiliser la classe .upload up.
Hors un nom de classe ne peut pas comporter d'espace et la classe CSS ".upload up" ne peut exister qu'en tant qu'erreur, donc ne donnera JAMAIS un résultat.
Si vous voulez sélectionner plusieurs classes il me semble(je ne suis pas expert en JQuery) qu'il y à une autre syntaxe à utiliser:
https://w3tutoriels.com/jquery/jquery-selecteurs/
https://duckduckgo.com/?q=s%C3%A9lectionner+plusieurs+%C3%A9l%C3%A9ments+en+JQuery
Ou même passer par le sélecteur CSS correct, ici tous ceux possible et ce qu'ils indiquent:
https://www.w3schools.com/cssref/css_selectors.asp
En clair soit
$(".upload .up") si c'est ça que vous voulez(voir explications du sélecteur CSS) ou pour les éléments d'une seule classe
$(".upload-up")
en utilisant la norme classique CSS ou n'importe laquelle qui est juste(donc sans espace dans un nom de classe qui sert à séparer 2 classes différentes pour un élément).
En espérant j'ai bien compris le problème. JQuery je connait un peu mais fait plus de pur JS ^parce que c'est pas toujours un avantage (JQuery) et que ça permet de mieux comprendre le raisonnement derrière(celui du créateur du programme comme celui de la logique du langage), ça revient simplement à créer ses propres fonctions plutôt qu'utiliser celles de JQuery bien pratiques toutefois par qu'elles pas mal de trucs sans avoir à les développer.
ça dépends des corconstances et des objectifs donc.
JQuery me satisfait pas surtout parce que dans pas mal de cas il va rajouter de la lenteur d''exécution surtout pour des tâches simples et/ou répétitives comme à travers une boucle destinée à l'animation graphique.
Indéniablement c'est un très bon outil JQuery et son succès pas démérité mais c'est le choix de son emploi ou pas que je critique dans certains cas ou écrire soit même quelques fonctions suffit plutôt que faire appel à une usine à gaz(même mimifié parce que n'importe quel fichier peut être mimifié de la même manière et plus il sera léger moins la mimification devient nécessaire).