Je suis entrain de travailler sur un petit code et j'ai un problème avec les eventListener. Dans mon code (ci-dessous), il y a des div générées en PHP / SQL et quad on click sur l'une d'entre elles, sa couleur de bordure devient bleu et les autres restent blanches. Problème c'est que je souhaite que quand l'on appuie sur le parent (article) les divs se remettent en blanc donc que toutes perdent la classe "resaSelected"...
Auriez-vous une solution ?
Voici mon code :
# Du code avant <div class="flexCol-around">
# Un peu de PHP qui affiche toutes mes données
<script>
function UnSelectResa() {
try
{
for (var i = 0; i <= document.getElementsByClassName("resaLine").length; i++) {
document.getElementsByClassName("resaLine")[i].classList.remove("resaSelected");
}
} catch {}
}
function SelectResa(_ID) {
UnSelectResa();
document.getElementsByClassName(_ID)[0].classList.add("resaSelected");
}
</script>
</div>
PS : Pour les modérateurs du forum, la coloration syntaxique n'accepte pas l'élément <blockquote>...
Maxence ABRILE
- Edité par Maxence ABRILE 1 juillet 2022 à 19:26:29
Il faut comprendre ici que c'est du php qui a affiché le code d'où sa "mocheté" de plus ce n'est qu'une partie car le reste se repète avec des infos différentes / le nom, L'ID...
Alors : ce que tu veux, c'est cibler un <article>, et quand on clique dessus mais pas dans son enfant de classe resaLine, on désactive tout, c'est bien ça ?
Il faut que tu cibles tous les <article> et que tu boucles dessus : tu sais faire ça ?
Dans la boucle, tu accroches un événement "click" avec addEventListener.
Et il faut appeler la méthode UnselectResa uniquement si on a cliqué autre part que dans la ligne.
Ce dernier point, tu peux l'avoir avec ce code :
if (!event.target.closest('.resaLine')) {
UnSelectResa();
}
Si la cible du clic (event.target) n'a pas de parent de classe "resaLine" (.closest), alors désélectionner. "event" c'est l'argument de addEventListener, ça peut être tartempion ou toto, il faut juste que ça soit le même dans la définition d'addEventListener (tout est expliqué dans le lien plus haut).
Pour closest, lire la documentation sur MDN. Attention, ce n'est pas compris du tout par Internet Explorer, toutes versions confondues ! Donc si c'est un besoin pour toi, il faudra trouver des adaptations (la doc en propose).
Normalement avec ça, tu peux avancer. N'hésite pas à revenir si tu bloques.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Alors, je n'ai qu'un seul article, donc je ne pense pas qu'il soit intéressant de reboucler dessus et je voulais par la même occasion savoir s'il était possible de sélectionner cette balise sans avoir à lui mettre des ID ou Classe (Je n'ai jamais trouvé sur internet) et bien sur sans jQuery.
Merci beaucoup de ton aide, je vais tester ce de suite et passerait la discussion en "Sujet résolu" si c'est le cas !
EDIT : C'est excellent, c'est exactement ce que je recherchais, merci énormément, voici mon code pour ceux qui souhaite :
<script>
const table = document.getElementById("table"); // <article> dont il était question
table.addEventListener("click", () => { // EventListener de article qui cherche un .resaLine
if (!event.target.closest('.resaLine')) {
UnSelectResa();
}
});
function UnSelectResa() { // Fonction qui déselectionne mes réservations (.resaLine)
try
{
for (var i = 0; i <= document.getElementsByClassName("resaLine").length; i++) {
document.getElementsByClassName("resaLine")[i].classList.remove("resaSelected");
}
} catch {}
}
function SelectResa(_ID) { // Fonction qui sélectionne mes réservations (.resaLine)
UnSelectResa();
document.getElementsByClassName(_ID)[0].classList.add("resaSelected");
}
</script>
Merci.
- Edité par Maxence ABRILE 2 juillet 2022 à 14:05:35
Je reviens rapidement sur le sujet pour presque la même raison, sauriez vous le faire pour un enfant d'une div, c'est à dire que dans ma div.resaLine j'ai maintenant un form avec 3 submit et quand je les... submit, l'animation se lance alors que je ne le souhaite pas, j'ai essayer avec la méthode du closest mais je n'ai rien trouvé, j'ai aussi fait vérifier que l'élément n'avait pas la même classe (resaState) mais rien n'y fait...
C'est exactement le même code et l'animation c'est le changement de couleur de la bordure mais j'aimerai appliqué l'exception qu'on a fait pour le parent de .resaLine à l'un de ses enfants, voici tout de même le code (sans php ) :
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)