Показать сообщение отдельно
  #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).

И поступать лучше именно так, не обращаясь к объектам по нескольку раз как вы это делаете тогда, когда он у вас уже есть в кеше.
Ответить с цитированием