Как сделать замену текста в блоке2 при наведении на блок 1?

Question

[Капитан Какао]

В JS есть такая штука, как замена текста.

$(".span1").text("Заменяем текст с помощью jQuery");

Подскажите, пожалуйста, как допилить это и сделать следующее. Есть такой HTML код.

<div class="box1" data-prise='2,5 x 1,5 200 300 400'></div>
<div class="box2" data-prise='3,5 x 2,5 300 400 500'></div>
<div class="box3" data-prise='4,5 x 3,5 400 500 600'></div>

<div>
Размер <span class="s1">2,5 x 1,5</span>
Цена 1 <span class="s2">200</span>
Цена 2 <span class="s3">300</span>
Цена 3 <span class="s4">400</span>
</div>

Нужно что бы при наведении на див с классом box1 в span с классом s1 вставлялся размер, в span с классом sp2 вставлялась одна цена, в sp3 вторая, и в sp4 третья цена.

Размеры и информация каждого блока хранится в data-prise

Answer 1

[Сергей ZSA]

Советую разнести цены и размер в разные data- атрибуты. После этого можно будет их вытягивать вот так:
$(".box1").bind("hover", function(){
var s1 = $(this).attr("data-s1"); //к примеру тут размер
var s2 = $(this).attr("data-s2"); //и так далее
$(".s1").text(s1);
$(".s1").text(s2);
});
Можно конечно вытянуть прямо вот так var data_p = $(this).attr("data-prise"); и потом строку разбивать так, как вам надо на массив и потом массив вставлять в text(), но разбиение вы сами тогда сделайте. Сейчас некогда этим заниматься.

Comments

[Капитан Какао]

В начале думал на разные data- атрибуты разбить, но потом подумал может так. Но раз так сложней, разделю на разные))
Спасибо большое!)