Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 06.12.2015, 19:10
Новичок на форуме
Отправить личное сообщение для AnnushkaV Посмотреть профиль Найти все сообщения от AnnushkaV
 
Регистрация: 04.12.2015
Сообщений: 9

не знаю правильно ли... http://codepen.io/AnnushkaV/pen/ZQELmL
получается что раньше я только показывала каждое описание, но не прятала. теперь пытаюсь спрятать после того как убрался курсор. не срабатывает(
Ответить с цитированием
  #12 (permalink)  
Старый 06.12.2015, 20:39
Новичок на форуме
Отправить личное сообщение для AnnushkaV Посмотреть профиль Найти все сообщения от AnnushkaV
 
Регистрация: 04.12.2015
Сообщений: 9

додумалась. теперь все задуманное работает
поскажите, пожалуйста, как теперь навести порядок в коде?
Ответить с цитированием
  #13 (permalink)  
Старый 07.12.2015, 00:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от AnnushkaV
поменяла mouseover на mouseenter. не сработало
Эти события отличаются друг от друга - первое возникает когда мышь оказывается на элементы и при движениях ее в границах элемента, то есть постоянно. А второе только тогда, когда мышь заходит на элемент, то есть всего раз. Если при этом обработчик будет создавать объекты, то при первом событии они и будет плодится.

Можно конечно прятать/показывать нечто, то есть проверили создан ли объект с описанием, и если да, то показать, иначе сперва создать. Но ведь не факт, что пользователь будет кататься по элементам просматривая их описания по несколько раз, а значит и плодить объекты забивая ими документ не лучшее решение.

.mouseenter() - создали объект с описанием и отобразили его.
.mouseleave() - удалили созданный объект с описанием.

И ничего плодится не будет.

как теперь навести порядок в коде?

var name, bigImg = $(".films-descr").on('mouseenter', function(){  
        var im   =  bigImg.closest('div#img-container')
                          .find('img');
        name =  im.attr('src')
                  .split("/")
                  .pop()
                  .split(".")
                  .shift();   
        //здесь создавалась переменная mess- зачем, если не видно ее использования?
        //это создали объект и показали
        $("<h2>"+im.attr('title')+"</h2>").prependTo(bigImg.find("#" + name)).show();    
    }).on('mouseleave', function(){
       //это сокращение, ибо name определили при заходе мышью на объект
       //но с учетом выше сказанного, здесь нужен не .hide()
       //а удаление ранее созданного объекта - remove() со всеми его потомками. 
       bigImg.find("h2").empty()
       bigImg.find("#" + name).hide();    
    });


JQ всегда возвращает объект-источник, поэтому можно писать сразу:

var name_var = $(selector).on(event, function() {...}) - и name_var = $(selector), или установить объекту обработчик, а кешировать его первый дочерний элемент, тогда:
var name_var = $(selector).on(event, function() {...}).children().first() и $(selector) получит обработчик, а name_var = первый дочерний элемент $(selector).

И поступать лучше именно так, не обращаясь к объектам по нескольку раз как вы это делаете тогда, когда он у вас уже есть в кеше.
Ответить с цитированием
  #14 (permalink)  
Старый 09.12.2015, 17:35
Новичок на форуме
Отправить личное сообщение для AnnushkaV Посмотреть профиль Найти все сообщения от AnnushkaV
 
Регистрация: 04.12.2015
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
Эти события отличаются друг от друга ...
Спасибо Вам огромнейшее за помощь и подробное объяснение) Буду разбираться)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отобразить данные в iframe через атрибут src в Internet Explorer? Heisenberg (X)HTML/CSS 1 27.10.2015 22:40
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
пытаюсь заменить часть текста в html который вроде как в переменной. mitiya Общие вопросы Javascript 4 22.03.2012 18:16
как "выхватить" часть числа POLOS Общие вопросы Javascript 1 17.03.2009 12:55
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 20:43