Блог

Главная - Вопросы по программированию - Я не могу удалить класс, который я передал контейнеру

Я не могу удалить класс, который я передал контейнеру

#javascript #class #toggle #addeventlistener

Вопрос:

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

ПОЖАЛУЙСТА, НЕ МЕНЯЙТЕ, ГДЕ НАХОДИТСЯ КЛАСС

 const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');

contain.addEventListener('click', e => {
  for (inCont of inConts) {
    inCont.classList.remove('red');
  }

  if (e.target.classList.contains('txt')) {
    e.target.parentElement.classList.toggle('red');
  }
}); 
 .in-cont.red .txt {
  color: red;
} 
 <div class="contain">
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
</div>

Ответ №1:

Вы можете легко переключать класс red , используя closest as:

closest выполняет поиск в DOM вверх для элемента, который соответствует селектору. Этот поиск включает в себя сам элемент.

 element.closest(selector)

Если он находит элемент, соответствующий селектору, он возвращает
элемент. Если он не находит никаких элементов, он возвращает null 

 const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');

contain.addEventListener('click', e => {
  if (e.target.closest("div.contain")) {
    e.target.closest("div.in-cont").classList.toggle("red")
  }
}); 
 .in-cont.red .txt {
  color: red;
} 
 <div class="contain">
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
</div>

Ответ №2:

При удалении red класса проверьте inCont , содержит ли объект события:

 const contain = document.querySelector('.contain');
const inConts = document.querySelectorAll('.in-cont');

contain.addEventListener('click', e => {
  for (inCont of inConts) {
    if (!inCont.contains(e.target)) {
      inCont.classList.remove('red');
    }
  }

  if (e.target.classList.contains('txt')) {
    e.target.parentElement.classList.toggle('red');
  }
}); 
 .in-cont.red .txt {
  color: red;
} 
 <div class="contain">
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
  <div class="in-cont">
    <p class="txt">Lorem ipsum dolor sit.</p>
  </div>
</div>

Комментарии:

1. Это работает. Но я не понимаю! inCont.contains(например,target)

2. не содержит просто проверки, существует ли класс или нет?

3. @ShaefulAmin contains проверяет, является ли элемент дочерним элементом элемента или самим элементом.

Метки: ,