Как передать data-attribute кнопки, сделав его классом для блока?

Question

[Иван Симонов]

Есть код - Fiddle
Пытаюсь передать по клику на кнопку ее data-attribute, как класс для блока.

Кликнув на button data-class="class-1" - всем блокам добавляется данный класс
Кликнув на button data-class="class-2" - всем блокам добавляется данный класс, но удаляется предыдущий
и т.д.
И как правильно это реализовать?

Answer 1

[0xD34F]

const blockSelector = '.block';
const buttonSelector = '[data-class]';
const activeClass = 'active';

const blocks = document.querySelectorAll(blockSelector);
const buttons = [...document.querySelectorAll(buttonSelector)];
const classes = buttons.map(n => n.dataset.class);

document.body.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    blocks.forEach(n => {
      n.classList.remove(...classes);
      n.classList.add(button.dataset.class);
    });

    buttons.forEach(n => n.classList.toggle(activeClass, n === button));
  }
});

Comments

[Иван Симонов]

Спасибо. Подскажите, как сделать чтобы первоначальный класс .block не удалялся? Чтобы добавлялся класс, т.е block class-1 и т.д
и этот код можете объяснить -

classes = [...buttons].map(n => n.dataset.class).filter(n => n !== currentClass);

[Иван Симонов]

как я понял можно сделать так n.classList.add('block', currentClass);

[0xD34F]

Иван Симонов,

Подскажите, как сделать чтобы первоначальный класс .block не удалялся?

А с чего вы взяли, что он удаляется?

и этот код можете объяснить

Это получение списка классов, которых после нажатия текущей кнопки у блоков быть не должно. Поскольку querySelectorAll возвращает NodeList, у которого нет метода map, сначала его надо превратить в массив, затем из каждой кнопки достаётся значение data-class, и наконец отбрасывается значение, соответствующее текущей кнопке.

[Иван Симонов]

0xD34F, Как я понимаю стрелочные функции не работают в IE11, как вы решаете данную проблему. Вы не поддерживаете IE11?

[0xD34F]

Иван Симонов, babel.

[Иван Симонов]

0xD34F, использовал babel - получил данный код Codepen - но в ie11 почему то показывает ошибку
Объект не поддерживает свойство или метод "from"

как я понимаю в данной строке return Array.from(arr);

Что я не так делаю?

[0xD34F]

Иван Симонов, не тот пресет использован, надо es2015-loose. А вообще - всё не так делаете. "Использовал babel..." - то, что вы использовали, это так, поиграться для получения представления о том, что babel делает. Хотите использовать его по-настоящему - читайте документацию, разбирайтесь, что и как.