Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Текст при наведении на картинку (https://javascript.ru/forum/dom-window/58233-tekst-pri-navedenii-na-kartinku.html)

gtxtymt 10.09.2015 18:08

Текст при наведении на картинку
 
Здравствуйте.

Есть такой код:
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
<div class="img5"></div>
<div class="img6"></div>


<div class="worktext"></div>

Необходимо, чтобы при наведении на картинки в worktext отображался заданный для изображения текст. Как это реализовать?

nesnayka 10.09.2015 18:50

$('.img1').hover(function(){
  $('.worktext').html('123kbnv kghkg');
});

И так для каждого.

gtxtymt 10.09.2015 19:01

Цитата:

Сообщение от nesnayka (Сообщение 388040)
И так для каждого.

Спасибо

Джон "Капитан" Воробей 10.09.2015 19:45

Цитата:

Сообщение от nesnayka (Сообщение 388040)
И так для каждого.

Это жесть конечно. Как вариант так хотя бы
<div class="img1" data-text="text 1"></div>
<div class="img2"  data-text="text 1"></div>
<div class="img3"  data-text="text 1"></div>
<div class="img4"  data-text="text 1"></div>
<div class="img5"  data-text="text 1"></div>
<div class="img6"  data-text="text 1"></div>

<div class="worktext"></div>

$('div[class^=img]').hover(function(){
   $('.worktext').html($(this).attr('data-text'));
}, function(){
   $('.worktext').html('');
})

nesnayka 10.09.2015 22:08

Джон "Капитан" Воробей,
Можно, но не факт, что есть возможность атрибут новый вставить.
У вас изящней и лаконичней, но менее универсально. )
Прсто насколько я знаю, зачастую подобные задачи для JS ставятся в случае, когда HTML код не так то легко и поправить.
Я бы сделал это еще на этапе формирования хтмл кода в виде:
<style>
.title {
  position:relative(absolute);
  bottom:0px;
  display:none;
}


.img:hover + .title {
  display:block;
}
</style>

<div class="img"></div>
<div class="title"></div>
...
<div class="img"></div>
<div class="title"></div>

Хотя можно добавить атрибут и с помощью JS, но как ни крути выйдет много строк...

Lemme 10.09.2015 22:16

Цитата:

Прсто насколько я знаю, зачастую подобные задачи для JS ставятся в случае, когда HTML код не так то легко и поправить.
Чаще всего - такие задачки ставятся, когда тот, кто ставит эту задачку, понятия не имеет - как ее решить лучше :-?

nesnayka 10.09.2015 22:40

Lemme,
Есть у меня один знакомый, который клепает сайты на WP. На уровне PHP+HTML+CSS он бы решил эту задачу, а вот с JS у него туго. Я от него частенько подобные просьбы о помощи слышу. )
Потому и взял за посылку, что хтмл править нельзя. )))

Lemme 10.09.2015 22:46

nesnayka, если он знает html,css и еще любой серверный язык, то с простыми вещами он легко разберется с помощью документации=)

nesnayka 10.09.2015 22:56

Lemme,
Ну вот не дается ему JS так просто, как дался РНР. ))

Джон "Капитан" Воробей 11.09.2015 12:05

nesnayka,
Низзя один и тот же код писать 1000000 раз, это нарушает принципы современного проектирования ПО (вообще любого). Если html изменить нельзя (конечно тяжело представить, но допустим), можно замутить что-нить вроде этого
var data = [
  {
    id:'1',
    text:'some text 1'
  },
  {
    id:'2',
    text:'some text 2'
  },
  {
    id:'3',
    text:'some text 3'
  }
];

$(document).ready(function(){
  $('div[class^=img]').hover(function(){
    var s = $(this).attr('class')
    var res = s.slice(3, 4);
    function fil(element){
       return element.id == res
    }
    var val = data.filter(fil);
    $('.worktext').html(val[0].text)
  },function(){
    $('.worktext').html('');              
  });
});

рони 11.09.2015 13:30

Джон "Капитан" Воробей,
может полноценный макет делать с run?

nesnayka 11.09.2015 13:44

Джон "Капитан" Воробей,
Интересно узнать у ТС (ясно, что человек делает только первые шаги), что для него понятней: код с соблюдением "правил проектирования" или шесть обработчиков .hover ? :)
Вы ведь даете советы начинающим, а не пытаетесь улучшить качество кода согласно всем канонам программирования.
Зачастую, для новичков код, написанный по этим канонам не просто непонятен, а и чреват тем, что человек потеряет тягу к программизму. Не забывайте, что для многих этот ресурс обучающий.


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