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

Question

[Михаил Иванов]

Есть div например и выпадающий список городов

<div id="city"><img src="img/flag-m.png" /> Москва</div>
<ul>
<li data-city="Красноярск"  data-gerb="/img/flag.png">Красноярск</li>
<li data-city="Казань" data-gerb="/img/flag.png">Казань</li>
<li data-city="Сочи"  data-gerb="/img/flag.png">Сочи</li>
</ul>

Как из выпадающего списка при клики на город , подставить значения data-city и data-gerb нажатого города
в

<div id="city"><img src="img/flag-m.png" /> Москва</div>

Answer 1

[0xD34F]

Оберните имя города в span, чтобы было так:

<div id="city">
  <img src="img/flag-m.png" />
  <span>Москва</span>
</div>

Сама подстановка значений:

const cityImage = document.querySelector('#city img');
const cityName = document.querySelector('#city span');

document.querySelector('ul').addEventListener('click', e => {
  const li = e.target.closest('li');
  if (li) {
    cityImage.setAttribute('src', li.getAttribute('data-gerb'));
    cityName.innerText = li.getAttribute('data-city');
  }
});

// или

document.querySelectorAll('li').forEach(function(n) {
  n.addEventListener('click', this);
}, ({ currentTarget: { dataset: { city, gerb } } }) => {
  cityImage.src = gerb;
  cityName.textContent = city;
});

Comments

[Михаил Иванов]

Супер оказалось все очень просто) Спасибо вам большое)