在codeschool上执行lessons,以下操作不起作用
$(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")
来获取捷径。我可以看到这样调用两次这样的效率是多么低效,但它实际上也是一个错误?
答案 0 :(得分:3)
不,这不是错误,问题是您在每个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');