J'ai le morceau suivant de JS/prototypeJS, que je voudrais écrire en entier vanessa JS. Je souhaite cliquer sur un élément (un parmi un certain nombre d'éléments avec la même classe - faq-container
) et ajouter une classe spécifique (dans ce cas faq-display
) et ajouter cette classe uniquement au conteneur parent (faq-block
).Convertir le prototype JS en vanille JS.
Je comprends que la fonction JS pure est quelque chose à faire avec .parent.addClass
mais ne trouve pas un exemple pertinent à ma situation.
Les lignes prototypejs sont:
faqContainers[i].addEventListener('click', function(e) {
et
var faqToggle = e.target.up('.faq-block');
Le fichier script est:
var faqContainers = document.getElementsByClassName('faq-container');
for (var i = 0; i < faqContainers.length; i++) {
faqContainers[i].addEventListener('click', function(e) {
var faqToggle = e.target.up('.faq-block');
if (faqToggle.classList.contains('faq-display')) {
faqToggle.classList.remove('faq-display');
} else {
faqToggle.classList.add('faq-display');
}
});
}
Merci beaucoup!
[ 'addEventListener'] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) n'est pas une méthode prototypejs – Bergi
En fonction de votre DOM (vous ne nous avez pas montré le balisage de votre page), vous n'avez peut-être même pas besoin de 'up' mais pouvez simplement utiliser quelque chose comme 'e.currentTarget.parentElement'. – Bergi
Dans Mac Safari (plus récent), vous pouvez substituer 'closest' pour' up' et votre script fonctionne sans modification. Si vous recherchez un polyfill pour le plus proche (qui devient juste natif à la plupart des navigateurs cibles), vous devez être défini. – Walter