与on()方法混淆

时间:2013-09-21 22:25:06

标签: jquery

在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")来获取捷径。我可以看到这样调用两次这样的效率是多么低效,但它实际上也是一个错误?

1 个答案:

答案 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');