Привет всем, нужно менять цвет картинки авто по клику на кружочек, то есть цвет кружочка должен соответствовать цвету машины .Как это реализовать?

Question

[Oldnickn]

https://codepen.io/oldnickn/pen/OJbwVQe?editors=1010

Comments

[FeST1VaL]

ну вы же знаете по какому кликнули элементу, берите его цвет и подставляйте в src картинки с машиной. Например вы можете в атрибуты занести цвет и получать его когда нажимаете на элемент.

[Oldnickn]

FeST1VaL, Да, так и нужно, только на практике не получается что-то

Answer 1

[0xD34F]

<div class="colorsSelector">
  <div class="colorItem" data-color="blue"></div>
  <div class="colorItem" data-color="white"></div>
  <div class="colorItem" data-color="red"></div>
  <div class="colorItem" data-color="black"></div>
  <div class="colorItem" data-color="white-pure"></div>
  <div class="colorItem" data-color="orange"></div>
  <div class="colorItem" data-color="graphite"></div>
</div>

[data-color="blue"]       { background-color: #325488; }
[data-color="white"]      { background-color: #cfcfcf; }
[data-color="red"]        { background-color: #c64040; }
[data-color="black"]      { background-color: #08090b; }
[data-color="white-pure"] { background-color: #f0f0f0; }
[data-color="orange"]     { background-color: #d87c5a; }
[data-color="graphite"]   { background-color: #7f7f7f; }

const container = document.querySelector('.colorsSelector');
const itemSelector = '.colorItem';
const activeClass = 'colorItem--active';
const img = document.querySelector('.imgHolder img');
const src = color => `//webcademy.ru/files/js2020/solaris/${color}.png`;


// делегированный обработчик клика назначается контейнеру с цветами
container.addEventListener('click', ({ target: { dataset: { color } } }) => {
  if (color) {
    img.src = src(color);
    document.querySelectorAll(itemSelector).forEach(n => {
      n.classList.toggle(activeClass, color === n.dataset.color);
    });
  }
});

// или, каждому цвету обработчик клика назначается индивидуально
const items = container.querySelectorAll(itemSelector);
items.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  img.src = src(t.dataset.color);
  items.forEach(n => n.classList.toggle(activeClass, n === t));
}

Comments

[Oldnickn]

А через dataset можно?

[0xD34F]

Oldnickn, я не понимаю, что вы говорите. Попробуйте ещё раз.

[Oldnickn]

0xD34F, В разметке я задал каждому элементу атрибут data-color. И присвоил ему соответствующее значение цвета:

При клике по такому элементу мне надо получать это значение:
var color = element.dataset.color

Затем это значение подставить в общий путь к имени файла:
image.src = `https://webcademy.ru/files/js2020/solaris/ ${ color } .png`

[0xD34F]

Oldnickn, дальше что?

[Oldnickn]

0xD34F, как код будет выглядеть при помощи dataset

[0xD34F]

Oldnickn, убил бы. Протрите глаза и перечитайте ответ.

[Oldnickn]

0xD34F, вот я даун