Как сменить текст у блока при нажаттии на другой блок jquey?

Question

[Clay]

Нужно чтобы при клике на color__item его значение в атрибуте data-name появлялось в color__des-item

<div class="color">
                  <div class="color__des">
                     <span>Цвет: </span>
                     <div class="color__des-list">
                        <div class="color__des-item">Fire Red</div>
                     </div>
                  </div>
                  <div class="color__list">
                     <div class="color__item orange" data-image="images/car-img.png" data-name="orange"></div>
                     <div class="color__item brown" data-image="images/car-img.png" data-name="brown"></div>
                     <div class="color__item gray-lite" data-image="images/car-img.png" data-name="gray-lite"></div>
                     <div class="color__item white" data-image="images/car-img.png" data-name="white"></div>
                     <div class="color__item red active" data-image="images/car-img.png" data-name="red"></div>
                     <div class="color__item green" data-image="images/car-img.png" data-name="green"></div>
                     <div class="color__item blue" data-image="images/car-img.png" data-name="blue"></div>
                     <div class="color__item gray" data-image="images/car-img.png" data-name="gray"></div>
                  </div>
               </div>

Answer 1

[0xD34F]

Куда надо записывать новый текст, откуда этот текст брать и как его там найти:

const target = document.querySelector('.color__des-item');
const container = document.querySelector('.color__list');
const key = 'name';
const attr = `data-${key}`;
const buttonSelector = `[${attr}]`;

Как достать из элемента значение data-атрибута:

const getAttr = el => el.dataset[key];
// или
const getAttr = el => el.getAttribute(attr);
// или
const getAttr = el => el.attributes[attr].value;

Обработчик клика можно назначить каждому элементу с data-атрибутом индивидуально:

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => target.textContent = getAttr(e.currentTarget));

Или, один раз - их общему предку:

container.addEventListener('click', ({ target: t }) =>
  (t = t.closest(buttonSelector)) &&
  (target.innerText = getAttr(t))
);

Comments

[Clay]

Возможно ли это реализовать на jquery?

[0xD34F]

Clay, возможно. Реализовывайте.