Как оптимальнее при клике на кнопки изменять состояния связанных с ними блоков?

Question

[Михаил]

Как оптимизировать код на javascript?
Надо, чтобы при нажатии на кнопку 1 менялся цвет у дива 1, при нажатии на кнопку 2 менялся цвет у дива 2 и т.д. При этом обернуть их в контейнер не могу, т.к. на сайте это будут элементы из разных секций.

Тут упрощенный пример:
https://codepen.io/mk3mk/pen/ZwQxMg?editors=0110

Хочу вместо индексов поставить переменную, но не могу понять как это сделать.

Да, и еще, это надо сделать на чистом js.

Answer 1

[0xD34F]

const buttonSelector = '.button';
const blockSelector = '.div';
const activeClass = 'red';

function toggleBlock(blocks, buttons, button) {
  const index = Array.prototype.indexOf.call(buttons, button);
  blocks.forEach((n, i) => {
    n.classList[i === index ? 'toggle' : 'remove'](activeClass);
  });
}


// обработчик клика делегированный, назначается один раз
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const blocks = document.querySelectorAll(blockSelector);
    const buttons = document.querySelectorAll(buttonSelector);
    toggleBlock(blocks, buttons, button);
  }
});

// или, назначаем обработчик клика каждой кнопке индивидуально
const buttons = document.querySelectorAll(buttonSelector);
const blocks = document.querySelectorAll(blockSelector);
const onClick = e => toggleBlock(blocks, buttons, e.currentTarget);
buttons.forEach(n => n.addEventListener('click', onClick));

Comments

[Михаил]

а может можно им каждому свой id ? а если много таких будет, то каждому надо присваивать ... может можно как-то, чтобы , например, нажата кнопка с индексом 1 , значит там меняется див с индексом 1. Через переменную как-то сделать. При нажатии на кнопку , ее индекс присваивать переменной, а потом ее передавать туда, где должно происходить изменение в диве с таким же индексом. ?

[Михаил]

что-то типа вот такого, но тут неправильно конечно, но смысл примерно такой

button.onclick = function() {
i = indexOf(button);
div[i].classList.toggle("red");
};

[0xD34F]

обновил ответ

[Михаил]

0xD34F, спасибо, хорошо работает. Я поставил первый вариант. А можно еще так сделать, чтобы, когда мы кликнули на первую кнопку, при этом первый див изменил цвет (это как есть сейчас), а чтобы при клике на другую кнопку, например вторую или третью, первый менялся обратно на исходный ? Т.е. надо, чтобы "изменённым" был только один див в каждый момент времени. Т.е. чтобы не было такого, что мы кликнули на все три кнопки, и у нас все три дива стали красные.

[0xD34F]

обновил ответ

[Михаил]

0xD34F, всё работает, спасибо! А я сделал еще вот такой смешной вариант

https://codepen.io/mk3mk/pen/ZwQxMg?editors=0010