2017-01-09 37 views
0

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!

+0

[ 'addEventListener'] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) n'est pas une méthode prototypejs – Bergi

+0

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

+0

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

Répondre

1

Voici un exemple en substituant closest() pour prototypejs up():

var faqContainers = document.getElementsByClassName('faq-container'); 
 

 
    for (var i = 0; i < faqContainers.length; i++) { 
 
    faqContainers[i].addEventListener('click', function(e) { 
 

 
     var faqToggle = e.target.closest('.faq-block'); 
 

 
     if (faqToggle.classList.contains('faq-display')) { 
 
     faqToggle.classList.remove('faq-display'); 
 
     } else { 
 
     faqToggle.classList.add('faq-display'); 
 
     } 
 

 
    }); 
 
    }
.faq { 
 
    display: none; 
 
    } 
 
    .faq-block.faq-display .faq { 
 
    display: block; 
 
    }
<div class="faq-container"> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    <div class="faq-block"> 
 
     <h3>Headline</h3> 
 
     <div class="faq"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </div> 
 
    </div> 
 
    </div>