web-dev-qa-db-fra.com

Utilisez Vanilla javascript pour ajouter / supprimer une classe à un autre élément après avoir cliqué sur un autre

J'ai parcouru un certain nombre de questions similaires, mais je ne trouve pas d'exemple spécifique de celui qui répond dans Vanilla JS comment ajouter et supprimer une classe à un élément différent de celui sur lequel vous avez cliqué. Je sais que cela a quelque chose à voir avec la mise en place d'une boucle et l'itération à travers les éléments, mais je me suis perdu dans le processus exact.

J'ai un certain nombre d'éléments avec un nom de classe de faq-container Et lorsque je clique sur l'un d'eux, j'aimerais que la classe faq-display Soit ajoutée à la balise body. Je sais que je dois configurer une boucle comme for (var i = 0; i < elements.length; i++) { elements[i].classList.remove('hover'); } mais je ne sais pas exactement où l'écrire dans le code pour que cela fonctionne. J'ai essayé un certain nombre de façons, mais toutes échouent.

Mon script actuel est le suivant, où je cible simplement le premier élément du tableau, mais je veux pouvoir cliquer sur l'un des éléments faq-container Et ajouter le nom de classe à la première et unique balise body:

document.addEventListener("DOMContentLoaded", function() {

  document.getElementsByClassName('faq-container')[0].addEventListener('click', function() {
    var faqToggle = document.getElementsByTagName('body')[0];
    if (faqToggle.classList.contains('faq-display')) {
      faqToggle.classList.remove('faq-display');
      // alert("remove faq display!");
    } else {
      faqToggle.classList.add('faq-display');
      // alert("add faq display!");
    }
  });


});
<div class="faq-container cf" id="faq-container">
  <h3 <?=ifxless::element( 'name')?>><?=ifxless::fill($this,'name');?> </h3>

  <div class="faq-content">
    <div class="h_line">&nbsp;</div>

    <div class="faq-bullets" <?=ifxless::element( 'content')?>>
      <?=ifxless::fill($this, 'content');?>
    </div>

  </div>

</div>
javascriptclassgetelementsbytagnamegetelementsbyclassname
10
sdawes
document.addEventListener("DOMContentLoaded", function() {
  var faqContainers = document.getElementsByClassName('faq-container');
  var faqToggle = document.getElementsByTagName('body')[0];
  for (var i = 0; i < faqContainers.length; i++) {

    faqContainers[i].addEventListener('click', function() {

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

    });
  }


});
16
Pranay Kumar

Vous devez boucler:

var faqs = document.querySelectorAll('.faq-container');
for (var i=0;i<faqs.length;i++) {
  faq[i].addEventListener('click', toggleFaq);
  // or faq[i].onclick=toggleFaq;
}


function toggleFaq() {
  var faqToggle = document.getElementsByTagName('body')[0];
  if (faqToggle.classList.contains('faq-display')) {
    faqToggle.classList.remove('faq-display');
    // alert("remove faq display!");
  } else {
    faqToggle.classList.add('faq-display');
    // alert("add faq display!");
  }
}

NOTE : si vous avez BEAUCOUP de ces divs, il vaut mieux avoir un gestionnaire d'événements pour un parent et tester ce qui a été cliqué. Je vous ai également donné un gestionnaire d'événements attach crossbrowser attach

function addEvent(element, myEvent, fnc) { return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false)); }

var topContainer = document.getElementById('faqContainerParent');

addEvent(topContainer,'click', function(e) {
  var tgt = e.target;
  if (tgt && tgt.nodeName === 'DIV') {
    if (tgt.classList.contains("faq-container")) {
      toggleFaq();
    }
  }
}
3
mplungjan