Как передать название и изображение из одного элемента в другой с использованием data-атрибутов?

Question

[hello-world-1]

Есть вот такая конструкция (https://jsfiddle.net/jw5e94hy/1/). Мне нужно, чтобы при наведение на элемент навигации, его атрибуты передавались в другой блок. Я пришел пока только к такой конструкции и не понимаю, что делать дальше.

Разъясню немного конкретнее: есть ссылка «nav-link» в которой имеются атрибуты «category и img». При наведение, их нужно передать в блок «preview». Атрибут category в preview-head, атрибут img в preview-img, соответственно. Буду благодарен за помощь!

Answer 1

[0xD34F]

const nav = document.querySelector('.nav');
const itemSelector = '.nav-link';
const image = document.querySelector('.preview-img');
const category = document.querySelector('.preview-head');

function updatePreview(data) {
  image.src = data.img;
  category.textContent = data.category;
}

Назначаем обработчик события каждому элементу индивидуально:

nav.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('mouseenter', this);
}, e => updatePreview(e.target.dataset));

Или, применяем делегирование:

nav.addEventListener('mouseover', e => {
  const data = e.target.closest(itemSelector)?.dataset;
  if (data) {
    updatePreview(data);
  }
});

Comments

[hello-world-1]

Большое спасибо. Отличное решение!