Смена класса по клику мыши на каждый элемент, сохраняя начальный класс

Question

Всем доброго дня!

Есть тестовой задание: Реализуйте следующую логику в index.js - при клике по любому квадрату с классом entry он и все квадраты в которые он вложен изменяют свой цвет. Изменение цвета осуществляется путём изменения CSS класса по логике "red" -> "green" -> "blue" -> "purple" -> "red" и далее по кругу (сохраняя класс entry конечно).

Что дано:

const cls = ["red", "green", "blue", "purple"];

.entry {
  display: inline-block;
  box-sizing: border-box;
  padding: 30px;
  border: solid black 2px;
}

.red {
  background-color: pink;
}

.green {
  background-color: lightgreen;
}

.blue {
  background-color: blue;
}

.purple {
  background-color: purple;
}

<div class="entry red">
  <div class="entry green">
    <div class="entry blue">
      <div class="entry purple"></div>
    </div>
  </div>
</div>

С чего я начал?

function myClick(event) {
  console.log('click');
  console.log(event.target);
}

document.querySelector("div").onclick = myClick;

document.onclick = function(event) {
  console.log(event.target.class);
  if (event.target.class == 'green') {
    console.log('Это зеленый квадрат');
  }
}

Логика, как я понял, следующая:

Отслеживаем по клику div
Создаем функцию смены класса выбранного div
магия с погружением и всплытием
В условии дан массив, значит, я должен его задействовать

По пункту № 3: я должен задействовать event.stopPropagation, правильно?

По пункту № 4: как грамотно через индекс менять класс?

Answer 1

const colors = ["red", "green", "blue", "purple"];

// Получаем со страницы все элементы с классом entry
const squares = document.querySelectorAll(".entry");

squares.forEach((square) => {
  // На каждый из квадратов добавляем обработчик события клика
  square.addEventListener("click", ({ currentTarget: { classList } }) => {
    const [entryClass, currentColorClass] = classList;
    // Удаляем класс с текущим цветом
    classList.toggle(currentColorClass);

    // Находим индекс нового цвета в массиве цветов
    const newColorIndex = (colors.indexOf(currentColorClass) + 1) % colors.length;
    // Добавляем нужный класс
    classList.toggle(colors[newColorIndex])
  })
})

Answer 2

const cls = ["red", "green", "blue", "purple"];

document.querySelector(".entry").addEventListener("click", e => {

  e.stopPropagation();

  e.composedPath()
    .filter(item => item.classList && item.classList.contains("entry"))
    .forEach(item => {
      const newClass =
        cls[
        cls.indexOf(item.classList[1]) < cls.length - 1
          ? cls.indexOf(item.classList[1]) + 1
          : 0
        ];
      cls.forEach(cl => {
        item.classList.toggle(cl, cl === newClass);
      });
    });
});

БЛОГ НА HUSL

Смена класса по клику мыши на каждый элемент, сохраняя начальный класс

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