0

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

Есть тестовой задание: Реализуйте следующую логику в 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('Это зеленый квадрат');
  }
}

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

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

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

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

1
  • Северные совы дали мне намёк на пункт про использование массива: for (let i = 0; i < cls.length; i++) { cls[i].addEventListener('click', () => { cls[i].classList.toggle(' следующий класс '); }); } 5 янв в 18:29

2 ответа 2

0
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])
  })
})
2
  • Алексей, низкий поклон за помощь! Но объясните, пожалуйста, строку: > .addEventListener("click", ({ currentTarget: { classList } }) Добавляем Прослушиватель Событий, в параметрах тип обрабатываемого события - "клик", а далее? "Мы возвращаем объект (?), обратный вызов Прослушивателя Событий которого в данный момент вызывается" (это было из подсказки VSC). Какой именно объект, classList? 8 янв в 18:18
  • @ГригорийСоловьев в этой строке мы добавляем прослушиватель события клика. Вторым аргументом addEventListener принимает функцию, которая будет выполняться каждый раз, когда отрабатывает событие - ({ currentTarget: { classList } }) => {}, просто я ее записал в виде стрелочной функции developer.mozilla.org/ru/docs/Web/JavaScript/Reference/…. Первым аргументом эта функция принимает event, а ({ currentTarget: { classList } }) его деструктуризация learn.javascript.ru/destructuring#destrukturizatsiya-obekta. 9 янв в 6:43
0
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);
      });
    });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.