JQ изменение содержимого блока?

Question

[Filyaaa]

Есть функция, которая при наведении на блок А копирует текст и подставляет в другой блок Б. Таких блоков много, которые нужно поочередно подставлять в Б. Как можно записать это компактно, а не дублировать эту функцию меняя переменную А на другую.

<div id="a">Hello A</div>
<div id="b">Hello B</div>
<div id="c">Hello C</div>
<div id="d">Hello D</div>
<div id="e">Hello E</div>
<div id="text">
    <div class="b">From A</div>
</div>

$('#a').mouseover(function() {
  var textContent = $('#a').text();
  $('.b').text(textContent);
});
$('#b').mouseover(function() {
  var textContent = $('#b').text();
  $('.b').text(textContent);
});

Answer 1

[Антон Усачев]

function setNewBlockContent(source, target) {
	target.html(source.html());
}
//	дайте всем блокам один класс для простоты выборки, например
$('.myBlock').on('mouseover', function() {
	setNewBlockContent($(this), $('#text'));
});

Ну или .text(), если нужно.

Comments

[Filyaaa]

А если по мимо этого есть еще блоки, которые так же необходимо перенести в другие блоки, это все можно записать как то одной функцией или только дублировать эту и менять классы?

[Антон Усачев]

Filyaaa, есть готовая функция

function setNewBlockContent(source, target) {
  target.html(source.html());
}

Либо подставляйте имена блоков в source, если нужно, чтобы текст вывелся в #text:

$('._новый_класс_блока').on('mouseover', function() {
  setNewBlockContent($(this), $('#text'));
});

Либо меняйте цель:

$('._новый_класс_блока').on('mouseover', function() {
  setNewBlockContent($(this), $('#_новый_айди_блока_для_вывода'));
});

Ну... Либо и то и другое.))

[Filyaaa]

Спасибо, а как мне делать если при наведении на этот блок А, есть еще один скрытый стилями блок, который нужно подставить в соседний блок?

[Антон Усачев]

Filyaaa, вопрос задан непонятно, давай на пальцах поподробнее.

[Filyaaa]

Антон Усачев,
Вот смотрите , есть блоки (А,Б,С,Д,Е) при наведении допустим на блок А его текст переносится в блок с текстом , который справа, так же при наведении на А должны меняться картинка, которая отмечена прямоугольником выше, и подпись которая прямоугольником ниже отмечена. И так для каждого из блоков (А,Б,С,Д,Е), у всех свои подписи скрытые и картинки.

[Антон Усачев]

Filyaaa, ну вот так можно, если совсем без заморочек и не видя всю картину. Классы нужно будет расставить те, что в вашем проекте.

[Filyaaa]

Антон Усачев, как с вами можно связаться? Я бы показал на самом проекте как оно должно быть, просто не срабатывает, не могу понять причину

Answer 2

[DanKud]

Добавить класс к блокам:

<div class="hello" id="a">Hello A</div>
<div class="hello" id="b">Hello B</div>
<div class="hello" id="c">Hello C</div>
<div class="hello" id="d">Hello D</div>
<div class="hello" id="e">Hello E</div>
<div id="text">
    <div class="b">From A</div>
</div>

$('.hello').on('mouseover', function() {
    $('.b').text($(this).text());
});

Answer 3

[Виталий Киренков]

Переделать с ID на класс и всё.