Изменение классов у нескольких блоков при клике по одному

Question

Столкнулся со следующей проблемой:

Верстаю слайдер и по логике действия, при клике на слайд с классом "inactive" у него этот класс должен отключаться и заменяться на "active", а слайд у которого изначально был включен класс "active", соответственно, должен приобрести "inactive" и потерять "active". Смог сделать так, чтобы при клике на не активный слайд у него менялись классы с "inactive" на "active", однако заставить изначально активный слайд стать неактивным никак не получается. Надеюсь объяснил доступно. Ниже мой html и js.

Html:

<div id="slider">
    <a class="slide active" href="#">
        <img src="/photos/slide1-2.jpg" alt="">
        <div class="card">
            <i>Новая коллекция</i>
            <h1>Hurriya</h1>
            <button>Перейти к коллекции</button>
        </div>
    </a>
    <a class="slide inactive" href="#">
            <img src="/photos/slide2.jpg" alt="">
                <div class="card">
                    <i>Классическая коллекция</i>
                    <h1>Borzline</h1>
                    <button>Перейти к коллекции</button>
                </div>
    </a>
    <a class="slide inactive" href="#">
        <img src="/photos/slide3.jpg" alt="">
        <div class="card">
            <i>Хит продаж</i>
            <h1>Heroes</h1>
            <button>Перейти к коллекции</button>
        </div>
    </a>
</div>

JS:

var slides = document.getElementsByClassName("slide");
    
    
    for (var i = slides.length; i--;) {
      slides[i].addEventListener('click', checkMulti);
    };
    
    function checkMulti() {
    
      if (this.classList.contains("inactive")) { 
        this.classList.toggle("inactive");
        this.classList.toggle("active");  
      } 
    }

Answer 1

Перед тем как поставить на кликнутом слайде класс active, можно пробежаться по всем слайдам и сделать их неактивными. А только потом добавить кликнутому элементу класс active.

Вообще можно обойтись и без класса inactive, он излишний.

var slides = document.getElementsByClassName("slide");

for (var i = slides.length; i--;) {
  slides[i].addEventListener('click', checkMulti);
};

function checkMulti(event) {

  event.preventDefault();

  for (var i = slides.length; i--;) {
    slides[i].classList.remove('active');
    slides[i].classList.add('inactive');
  };

  event.target.closest('a').classList.add('active');
}

a {
  display: block;
  padding: 15px;
}

a.active {
  border: 3px solid green;
}

<div id="slider">
  <a class="slide active" href="#">
    <img src="/photos/slide1-2.jpg" alt="">
    <div class="card">
      <i>Новая коллекция</i>
      <h1>Hurriya</h1>
      <button>Перейти к коллекции</button>
    </div>
  </a>
  <a class="slide inactive" href="#">
    <img src="/photos/slide2.jpg" alt="">
    <div class="card">
      <i>Классическая коллекция</i>
      <h1>Borzline</h1>
      <button>Перейти к коллекции</button>
    </div>
  </a>
  <a class="slide inactive" href="#">
    <img src="/photos/slide3.jpg" alt="">
    <div class="card">
      <i>Хит продаж</i>
      <h1>Heroes</h1>
      <button>Перейти к коллекции</button>
    </div>
  </a>
</div>

БЛОГ НА HUSL

Изменение классов у нескольких блоков при клике по одному

Ответы (1 шт):