Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменение текста при наведении (https://javascript.ru/forum/misc/48535-izmenenie-teksta-pri-navedenii.html)

xformer 07.07.2014 21:53
Изменение текста при наведении
 
Здравствуйте, уважаемые форумчане.
С jQuery имею дело недавно, поэтому прошу помощи. Есть такой код:

<span class="cvet_tovara">Орех</span>
<br>
<div class="img_tovara_1"><img src="/img/20a.jpg" width="38" height="38" alt="Орех" title="Орех"></div>
<div class="img_tovara_2"><img src="/img/19s.jpg" width="38" height="38" alt="Ольха" title="Ольха"></div>
<div class="img_tovara_3"><img src="/img/18d.jpg" width="38" height="38" alt="Кедр" title="Кедр"></div>

Таких блоков может быть 2, 3, 4, 5... Как видим, class="img_tovara_ тут цифра меняется".
Никак не могу сделать так, чтобы при наведении на определенный div в span изменялся текст с Орех на нужный, т.е. при наведении на второй блок изменялось на Ольха, при наведении на третий блок изменялось на Кедр и т.д.

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

xformer 07.07.2014 23:02
Простите, не в тот раздел разместил тему.

BETEPAH 07.07.2014 23:23 
<span class="cvet_tovara">Орех</span>
<br>
<div class="img_tovara_1"><img src="/img/20a.jpg" width="38" height="38" alt="Орех" title="Орех"></div>
<div class="img_tovara_2"><img src="/img/19s.jpg" width="38" height="38" alt="Ольха" title="Ольха"></div>
<div class="img_tovara_3"><img src="/img/18d.jpg" width="38" height="38" alt="Кедр" title="Кедр"></div>
<script>
[].slice.call(document.querySelectorAll('[class ^= img_tovara_]')).forEach(function(node){ 
    node.onmouseenter = function() {
        document.querySelector('.cvet_tovara').innerHTML = this.querySelector('img').title;
    }
  });
</script>

xformer 08.07.2014 07:57
Спасибо огромное.
Сейчас активной остается та надпись, на рисунок которой последней наводили указатель. А как сделать, чтобы после действий, надпись снова стала исходной?

WorM32 08.07.2014 09:53
BETEPAH,
больше похоже на костыль, чем на нормальное решение.

BETEPAH 08.07.2014 11:23
Цитата:
Сообщение от xformer
Сейчас активной остается та надпись, на рисунок которой последней наводили указатель
условия топика соблюдены вроде :) Можно, конечно, возвращать исходную надпись. Посмотрим вариант WorM32, потом доделаем.

WorM32 08.07.2014 11:47 
<style>
.img_tovara {
  width: 38px; 
}
</style>
<span class="cvet_tovara">Орех</span>
<br>
<div class="img_tovara"><img src="/img/20a.jpg" width="38" height="38" alt="Орех" title="Орех"></div>
<div class="img_tovara"><img src="/img/19s.jpg" width="38" height="38" alt="Ольха" title="Ольха"></div>
<div class="img_tovara"><img src="/img/18d.jpg" width="38" height="38" alt="Кедр" title="Кедр"></div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
(function () {
var cvetTovara = $('.cvet_tovara'),
    defaultCvet = cvetTovara.text();
$('.img_tovara')
  .on('mouseenter', function () {
    var cvet = $(this).find('img').attr('title');
    cvetTovara.text(cvet);
  })
  .on('mouseleave', function () {
    cvetTovara.text(defaultCvet); 
  });
})();
</script>

BETEPAH 08.07.2014 11:59
WorM32,
Вы изменили верстку и добавили 100 килобайтную библиотеку. А в остальном тот же костыль :)

WorM32 08.07.2014 12:19
Цитата:
Сообщение от BETEPAH (Сообщение 319975)
WorM32,
Вы изменили верстку
изменилось только имя класса, тк это чуть более правильно, чем есть.
Цитата:
Сообщение от BETEPAH (Сообщение 319975)
и добавили 100 килобайтную библиотеку.
ТС написал, что юзает jQuery изначально.
Цитата:
Сообщение от BETEPAH (Сообщение 319975)
А в остальном тот же костыль :)
в чем?)

BETEPAH 08.07.2014 14:34
Цитата:
Сообщение от WorM32
изменилось только имя класса, тк это чуть более правильно, чем есть.
на основании чего Вы сделали этот вывод? Если в проекте используется определенный нейминг, наверное, на это были причины. Уж в таком случае чуть более правильным было бы добавить класс, а не заменять.
Цитата:
Сообщение от WorM32
ТС написал, что юзает jQuery изначально.
Мы по-разному трактуем предложение "С jQuery имею дело недавно". Если что-то можно сделать без jQ, не раздувая при этом код, лучше делать без jQ.
Цитата:
Сообщение от WorM32
в чем?)
парирую вопросом: в чем отличие-то? ;) Почему там костыль, а здесь не костыль?

<span class="cvet_tovara" data-default="Орех">Орех</span>
<br>
<div class="img_tovara_1"><img src="/img/20a.jpg" width="38" height="38" alt="Орех" title="Орех"></div>
<div class="img_tovara_2"><img src="/img/19s.jpg" width="38" height="38" alt="Ольха" title="Ольха"></div>
<div class="img_tovara_3"><img src="/img/18d.jpg" width="38" height="38" alt="Кедр" title="Кедр"></div>
<script>
[].slice.call(document.querySelectorAll('[class ^= img_tovara_]')).forEach(function(node){ 
    var title = document.querySelector('.cvet_tovara');
    node.onmouseenter = function() {
        title.innerHTML = this.querySelector('img').title;
    }
    node.onmouseleave = function() {
        title.innerHTML = title.getAttribute('data-default');
    }
// это можно убрать, если не понадобится :)
    node.onclick = function() { 
        title.setAttribute('data-default', title.innerHTML = this.querySelector('img').title);
    }
  });
</script>


Часовой пояс GMT +3, время: 06:40.