Как при нажатии на цвет добавить элементу (data-id="black")?

Question

[Shuboanator]

Как сделать, что бы при нажатии на элемент цвета к кнопке добавлялась data-id="color"?

<div class="black"></div>
<div class="white"></div>
<button class="add-to-bag" сюда добавить data-id при выборе цвета></button>

Answer 1

[0xD34F]

Не вижу причин, по которым цвета должны быть классами. Замените на data-атрибуты:

<div data-color="black"></div>
<div data-color="white"></div>

document.addEventListener('click', ({ target: { dataset: { color } } }) => {
  if (color) {
    document.querySelector('button').dataset.id = color;
  }
});

// или

const button = document.querySelector('button');
const onClick = e => button.setAttribute('data-id', e.target.getAttribute('data-color'));
document.querySelectorAll('[data-color]').forEach(n => n.addEventListener('click', onClick));

Comments

[Shuboanator]

Спасибо! А есть вариация на jquery? Просто хочу понять и запомнить на будущее и он мне проще для понимания)

[0xD34F]

Нет блин, нету:

$('[data-color]').click(function() {
  $('button').attr('data-id', $(this).data('color'));
});

Если интересует код на jquery, что помешало сразу об этом сказать?

Answer 2

[Lynatik001]

ну думаю обяснять как вешать онклик не надо?
а в нем

let el = document.querySelector('.black')
el.setAttribute('data-id', 'black');

Comments

[Shuboanator]

я дико извиняюсь за тупизм, но у меня получилось это сделать с одним цветом. А как сделать. что бы переключении цвета data-id менялось догнать не могу. Еще раз извиняюсь Js знаю плохо, но функцию эту реализовать надо)