JQuery 关于多个元素的多个事件

Question

毫无疑问它有效，但我知道这不是一件好事code.So我想完成

使用一个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)，因为在这种情况下它更快更有效。

工作fiddle：http://www.codeply.com/go/uUoOo1vlaB

JQuery 关于多个元素的多个事件

JQuery on with multiple events for mutiple elements

jquery

jquery-on