Как сделать замену цвета каждого элемента независимо друг от друга?

Question

Есть сайт https://www.nouvolo.com/products/sleevedcablemod, и у них сделан конструктор проводов, при выборе цвета, выбираешь какой провод покрасить. как это реализовано? Пробовал через color picker, получается какая то белиберда...

Answer 1

У них это реализовано примерно так:

const radios = [...colors.querySelectorAll('input')];

radios.forEach(c => {
  c.nextElementSibling.style.backgroundColor = c.value;
});


cables.addEventListener('click', e => {
  let cc = radios.filter(c => c.checked);
  if (e.target.nodeName === 'LI' && cc.length) {
    e.target.style.backgroundColor = cc[0].value;
  }
});

#cables {
  padding: 0;
  max-width: 350px;
}

#cables li {
  margin: 5px;
  height: 15px;
  list-style: none;
  background-color: #999;
  cursor: pointer;
}

#colors label {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

#colors input {
  display: none;
}

#colors input:checked+label {
  box-shadow: 0 0 0 2px #000, inset 0px 0px 0 2px #fff;
}

<ul id="cables">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<div id="colors">
  <input id="color-grey" name="color" type="radio" value="#999" checked>
  <label for="color-grey"></label>
  <input id="color-red" name="color" type="radio" value="red">
  <label for="color-red"></label>
  <input id="color-blue" name="color" type="radio" value="blue">
  <label for="color-blue"></label>
  <input id="color-green" name="color" type="radio" value="green">
  <label for="color-green"></label>
  <input id="color-orange" name="color" type="radio" value="#ff8000">
  <label for="color-orange"></label>
</div>

При клике на "провод", берется цвет из значения отмеченной радиокнопки (переключателя)

БЛОГ НА HUSL

Как сделать замену цвета каждого элемента независимо друг от друга?

Ответы (1 шт):