Как при наведении на блок изменить текст у вышестоящего блока?

Question

[Гарольд]

Как при наведении mouseover мышки на блок .pictures__another брать из этого блока текст и подставлять в блок.picture__text, а после mouseleave возвращать исходный текст?

<div class="picture__text">Картина <span>- белая</span></div>

<div class="pictures__another">Черная</div>
<div class="pictures__another">с яблоками</div>
<div class="pictures__another">космическая</div>

Answer 1

[0xD34F]

const $block = $('.picture__text');
const text = $block.text();
const itemSelector = '.pictures__another';

$(document).on('mouseover mouseout', itemSelector, function(e) {
  $block.text(e.type === 'mouseout' ? text : $(this).text());
});

// или

$(itemSelector).hover(
  e => $block.text($(e.currentTarget).text()),
  () => $block.text(text)
);

Comments

[Froggyweb]

Извините, а почему на document событие*

[0xD34F]

Froggyweb, погуглите, что такое делегирование.

[Гарольд]

Спасибо. Добавлю data-text

[Froggyweb]

0xD34F, гуглил, поэтому спрашивал это вообще нормальная практика все вешать на корневой узел. а там доплывет событие
а на класс повесить событие "дорого". это потеря производительности? если классов к примеру 50? Сорри что вклиниваюсь в чужую тему :(

[Гарольд]

Господа, как изменить поиск текста на data-text у класса .pictures__another?

[0xD34F]

Froggyweb, думаю, вам следует оформить отдельный вопрос, где вы спросите и про нормальные практики, и про 50 классов, и про что угодно. Уверен, найдётся множество людей, которые захотят поговорить с вами на все эти темы.

Гарольд, я ничего не понял. Какой поиск текста, вы о чём?

[Гарольд]

0xD34F, искать '[data-text]' вместо класса .pictures__another

<div class="pictures__another" data-text="космическая">Еще картинка</div>

[0xD34F]

Гарольд, attribute selectors.

[Гарольд]

0xD34F,

$(document).on('mouseover', '.color-picker', function() {
	$text.text($(this).text()+ " " + $(this).attr( "data-name" ));
}).on('mouseout', '.color-picker', function() {
	$text.text(text);
});

Работает, но, я не сделал ошибок?

[0xD34F]

Гарольд, ну, раз работает - наверное, нет.