Путаница с по методу

Question

делать() мой lessons на codeschool, следующее не работает

$(document).ready(function() { 
    $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle(); 
    }); 
    $(".photos").on("mouseenter", "li", function() { 
    $(this).find("span").slideToggle(); 

    $(".photos").on("mouseleave", "li", function() { 
    $(this).find("span").slideToggle(); 
    }); 
    }); 
}); 

а в следующем, по-видимому правильно.

$(document).ready(function() { 
    $("#tour").on("click", "button", function() { 
    $(".photos").slideToggle(); 
    }); 
    $(".photos").on("mouseenter", "li", function() { 
    $(this).find("span").slideToggle(); 

    })   .on("mouseleave", "li", function() { 
    $(this).find("span").slideToggle(); 
    }); 
}); 

Он смотрит на меня, как будто они просто взять ярлык, оставив из второй $(".photos"). Я вижу, как может быть неэффективно вызывать что-то в два раза, но это тоже ошибка?

Answer 1

Нет, это не ошибка, проблема в том, что вы устанавливаете новый обработчик событий mouseleave на каждое событие mouseenter.

$(".photos").on("mouseenter", "li", function() { 
    $(this).find("span").slideToggle(); 

    // Here 
    $(".photos").on("mouseleave", "li", function() { 
     $(this).find("span").slideToggle(); 
    }); 
}); 

Для Минимизация кода вы можете передать объект методу on:

$(".photos").on({ 
    mouseenter: function() { 
     $(this).find("span").slideToggle(); 
    }, 
    mouseleave: function() { 
     $(this).find("span").slideToggle(); 
    } 
}, 'li');