Вопрос по class, javascript, getelementsbytagname, getelementsbyclassname – Используйте ванильный JavaScript для добавления / удаления класса в другой элемент после нажатия на другой

9

Я просмотрел несколько похожих вопросов, но не могу найти конкретный пример того, который отвечает в vanilla JS, как добавить и удалить класс для другого элемента из того, на который был нажат. Я знаю, что это как-то связано с настройкой цикла и перебора элементов, но я заблудился в точном процессе.

У меня есть ряд элементов с именем классаfaq-container и когда я нажимаю на любой из них, я хотел бы классfaq-display добавлено в тег body. Я знаю, что должен настроить петлю, какfor (var i = 0; i < elements.length; i++) { elements[i].classList.remove('hover'); } но я не уверен относительно того, где именно это написать в коде, чтобы сделать эту работу. Я пробовал несколько способов, но все не удалось.

Мой текущий сценарий выглядит следующим образом, где я просто нацеливаюсь на первый элемент в массиве, но я хочу иметь возможность нажать на любой изfaq-container элементы и добавьте имя класса в первый и единственный тег 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>

разметка является частью системы управления контентом компании, использующей блоки кода. Но я добавлю это к моему примеру ... sdawes
Пожалуйста, обновите ваш фрагмент HTML, чтобы сделать егоминимальный воспроизводимый пример mplungjan
Пожалуйста, смотрите мое обновление для лучшего решения. mplungjan

Ваш Ответ

2   ответа
12

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!");
      }

    });
  }


});
Спасибо за это! sdawes
Кроме того, что я первый и использую лучший запрос на выборкуВсе разница между этим и моим? mplungjan
@mplungjan спасибо за редактирование Pranay Kumar
3

Вам нужно зациклить:

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!");
  }
}

НОТА: если у вас есть МНОЖЕСТВО этих div-ов, вам лучше иметь один обработчик события для родителя и проверить, что было нажато. Я также дал вам обработчик событий присоединения кроссбраузера

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();
    }
  }
}

Похожие вопросы