Как сделать так, чтобы при выборе другого элемента ему добавлялся класс, а у предыдущего этот же класс пропадал на чистом JS?

Question

Есть svg картинка, она содержит несколько элементов (path). Задача была сделать так чтобы при клике на этот path ему добавлялся класс с измененным opacity. Клас добавляется, но при клике на другой path он так и остается. Как сделать так, чтобы при клике на дургой path, у предыдущего элемента этот же класс пропадал? Ссылка на проект: https://plupiks.github.io/melody-landing/

.hero {
  padding: 120px 0 100px;
}

.hero--wrapper {
  font-size: 2.3125rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-left {
  padding-right: 30px;
}

.house-img {

  & path {
    opacity: 0;

    &:hover {
      opacity: 0.5;
    }
  }
}

.house-img--active {
  opacity: 1 !important;
}

const houseFloor = document.querySelector('.house-img');

houseFloor.addEventListener('click', function (e) {

  var floorActive = e.target;
  floorActive.classList.toggle("house-img--active");
})

Answer 1

const svgsContainer = document.querySelector('.svgs');
const svgsImgs = document.querySelectorAll('.svgImage');

svgsContainer.onclick = function(e) {
  svgsImgs.forEach((i) => {
    i.classList.remove('is-active');
  })
 
  e.target.classList.add('is-active');
}

svg {
  width: 100px;
  height: 100px;
}

.is-active path {
  fill: red;
}

<div class="svgs">
  <svg class="svgImage" enable-background="new 0 0 102 102" height="512" viewBox="0 0 102 102" width="512"
       xmlns="http://www.w3.org/2000/svg">
      <g>
        <path d="m70.99 73.28h-5.78v-5.78c0-.28-.22-.5-.5-.5h-4.19c-.28 0-.5.22-.5.5v5.79h-5.78c-.28 0-.5.22-.5.5v4.19c0 .28.22.5.5.5h5.78v5.78c0 .28.22.5.5.5h4.19c.28 0 .5-.22.5-.5v-5.78h5.78c.28 0 .5-.22.5-.5v-4.19c0-.28-.22-.51-.5-.51zm-.5 4.19h-5.78c-.28 0-.5.22-.5.5v5.78h-3.19v-5.78c0-.28-.22-.5-.5-.5h-5.78v-3.19h5.78c.28 0 .5-.22.5-.5v-5.78h3.19v5.79c0 .28.22.5.5.5h5.78z"/>
      </g>
  </svg>


  <svg class="svgImage" enable-background="new 0 0 102 102" height="512" viewBox="0 0 102 102" width="512"
       xmlns="http://www.w3.org/2000/svg">
      <g>
        <path d="m70.99 73.28h-5.78v-5.78c0-.28-.22-.5-.5-.5h-4.19c-.28 0-.5.22-.5.5v5.79h-5.78c-.28 0-.5.22-.5.5v4.19c0 .28.22.5.5.5h5.78v5.78c0 .28.22.5.5.5h4.19c.28 0 .5-.22.5-.5v-5.78h5.78c.28 0 .5-.22.5-.5v-4.19c0-.28-.22-.51-.5-.51zm-.5 4.19h-5.78c-.28 0-.5.22-.5.5v5.78h-3.19v-5.78c0-.28-.22-.5-.5-.5h-5.78v-3.19h5.78c.28 0 .5-.22.5-.5v-5.78h3.19v5.79c0 .28.22.5.5.5h5.78z"/>
      </g>
  </svg>


  <svg class="svgImage" enable-background="new 0 0 102 102" height="512" viewBox="0 0 102 102" width="512"
       xmlns="http://www.w3.org/2000/svg">
      <g>
        <path d="m70.99 73.28h-5.78v-5.78c0-.28-.22-.5-.5-.5h-4.19c-.28 0-.5.22-.5.5v5.79h-5.78c-.28 0-.5.22-.5.5v4.19c0 .28.22.5.5.5h5.78v5.78c0 .28.22.5.5.5h4.19c.28 0 .5-.22.5-.5v-5.78h5.78c.28 0 .5-.22.5-.5v-4.19c0-.28-.22-.51-.5-.51zm-.5 4.19h-5.78c-.28 0-.5.22-.5.5v5.78h-3.19v-5.78c0-.28-.22-.5-.5-.5h-5.78v-3.19h5.78c.28 0 .5-.22.5-.5v-5.78h3.19v5.79c0 .28.22.5.5.5h5.78z"/>
      </g>
  </svg>


  <svg class="svgImage" enable-background="new 0 0 102 102" height="512" viewBox="0 0 102 102" width="512"
       xmlns="http://www.w3.org/2000/svg">
      <g>
        <path d="m70.99 73.28h-5.78v-5.78c0-.28-.22-.5-.5-.5h-4.19c-.28 0-.5.22-.5.5v5.79h-5.78c-.28 0-.5.22-.5.5v4.19c0 .28.22.5.5.5h5.78v5.78c0 .28.22.5.5.5h4.19c.28 0 .5-.22.5-.5v-5.78h5.78c.28 0 .5-.22.5-.5v-4.19c0-.28-.22-.51-.5-.51zm-.5 4.19h-5.78c-.28 0-.5.22-.5.5v5.78h-3.19v-5.78c0-.28-.22-.5-.5-.5h-5.78v-3.19h5.78c.28 0 .5-.22.5-.5v-5.78h3.19v5.79c0 .28.22.5.5.5h5.78z"/>
      </g>
  </svg>
</div>

Answer 2

const houseFloor = document.querySelector('.house-img');

houseFloor.addEventListener('click', function (e) {
  var floors = document.querySelectorAll(".house-floor");
  var floorActive = e.target;
  Array.from(floors).forEach(i => {
    i.classList.remove("house-img--active");
  })
  floorActive.classList.add("house-img--active");
})

БЛОГ НА HUSL

Как сделать так, чтобы при выборе другого элемента ему добавлялся класс, а у предыдущего этот же класс пропадал на чистом JS?

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