JQuery on 多个元素的多个事件

Question

毫无疑问它可以工作，但我知道这不是一个好的代码。所以我想完成

• 使用on() 使其工作

  <script>
      $(document).on("mouseenter", ".BUTTON_ONE", function() {
          $(this).animate({ 
              \'padding-right\' : 10,
          },30);
      });
      $(document).on("mouseleave", ".BUTTON_ONE", function() {
          $(this).animate({ 
              \'padding-right\' : 4,
          },30);
      });
      $(document).on("mouseenter", ".BUTTON_TWO", function() {
          $(this).animate({ 
              \'padding-left\' : 10,
          },30);
      });
      $(document).on("mouseleave", ".BUTTON_TWO", function() {
          $(this).animate({ 
              \'padding-left\' : 4,
          },30);
      });
      $(document).on("mouseenter", ".BUTTON_THREE", function() {
          $(this).animate({ 
              \'padding-left\' : 10,
          },30);
      });
      $(document).on("mouseleave", ".BUTTON_THREE", function() {
          $(this).animate({ 
              \'padding-left\' : 4,
          },30);
      });
   </script>
  

Answer 1

也许是这样的：:)

$(document).ready(function() {
    $(document.body)
    .on({
        'mouseenter': function(e) { animate_padding_right(e,10); },
        'mouseleave': function(e) { animate_padding_right(e,4); }
    }, ".BUTTON_ONE")
    .on({
        'mouseenter': function(e) { animate_padding_left(e,10); },
        'mouseleave': function(e) { animate_padding_left(e,4); }
    }, ".BUTTON_TWO,.BUTTON_THREE");
});
function animate_padding_left(e,val) {
    $(e.target).animate({'padding-left':val},30);
}
function animate_padding_right(e,val) {
    $(e.target).animate({'padding-right':val},30);
}

请注意，我使用$(document.body)，因为它在这种情况下更快且更有效。

工作小提琴：http://www.codeply.com/go/uUoOo1vlaB