0

В jQuery есть установка текста элемента:

$(".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>

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

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

2
  • Что вы пробовали сделать? Что не получилось? Всё есть в документации
    – Darth
    27 июн 2015 в 14:28
  • Так я в JS просто не особо то и силён. По этому и пишу сюда, так как не знаю способа реализации.
    – Rad Cor
    27 июн 2015 в 14:41

1 ответ 1

2

В рамках существующего HTML-кода (если его вообще нельзя менять):

  • Добавляем обработчик события наведения мыши 'mouseover' для .box1,.box2,.box3 (предполагаю, что нужно наведение не только на .box1).
  • Берём значение data-prise (не знаю почему оно называется не data-price), делим его по пробелам, первые три части (например, 2,5 x 1,5) объединяем обратно в одну. Можно было тот же результат получить через регулярное выражение.
  • Устанавливаем полученные значения (priceInfo) в блоки .s1 ... .s4 с помощью обычного цикла.

$(document).ready(function() {
    $('.box1,.box2,.box3').on('mouseover', function() {
        var price = $(this).data('prise');
        var priceInfo = price.split(' ');
        priceInfo[0] = [priceInfo[0], priceInfo[1], priceInfo[2]].join(' ' );
        priceInfo.splice(1, 2);
        for (var i = 1; i <= 4; i++) {
            $('.s' + i).text(priceInfo[i - 1]);
        }
    });
});
<div class="box1" data-prise='2,5 x 1,5 200 300 400'>box1</div>
<div class="box2" data-prise='3,5 x 2,5 300 400 500'>box2</div>
<div class="box3" data-prise='4,5 x 3,5 400 500 600'>box3</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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Что я бы изменил в HTML для упрощения кода:

  • Классы у элементов .box1, .box2 и .box3 заменил на .box.
  • Разбил data-prise на data-size и data-prices.
  • Заменил .s1 на .size, а .s2, .s3 и .s4 на .price.

В итоге код может выглядеть так:

$(document).ready(function() {
    var $size = $('.size');
    var $prices = $('.price');
    $('.box').on('mouseover', function() {
        var size = $(this).data('size');
        var prices = $(this).data('prices').split(' ');
        $size.text(size);
        $prices.text(function(i) { return prices[i]; });
    });
});
<div class="box" data-size='2,5 x 1,5' data-prices='200 300 400'>box1</div>
<div class="box" data-size='3,5 x 2,5' data-prices='300 400 500'>box2</div>
<div class="box" data-size='4,5 x 3,5' data-prices='400 500 600'>box3</div>
<div>
    Размер: <span class="size">2,5 x 1,5</span>
    Цена1: <span class="price">200</span>
    Цена2: <span class="price">300</span>
    Цена3: <span class="price">400</span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • Regent, большое спасибо. Великолепное решение. ОЧень благодарен тебе!
    – Rad Cor
    28 июн 2015 в 17:34
  • @RadCor на здоровье.
    – Regent
    28 июн 2015 в 17:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.