Question

想知道是否有人可以帮我简化这一点jQuery：

$('.fixed-booking').on('mouseenter', function () {
    var booking = $('.fixed-booking'),
        tabHeight = $('.fixed-booking .nav-tabs').outerHeight(),
        contentHeight = $('.fixed-booking .tab-content').outerHeight(),
        bothHeight = tabHeight + contentHeight
    ;
    booking.css({
        'transform': 'translate(0,-' + bothHeight + 'px)'
    });
});

$('.fixed-booking').on('mouseleave', function () {
    var booking = $('.fixed-booking'),
        tabHeight = $('.fixed-booking .nav-tabs').outerHeight(),
        contentHeight = $('.fixed-booking .tab-content').outerHeight(),
        bothHeight = tabHeight + contentHeight
    ;
    booking.css({
        'transform': 'translate(0,-' + tabHeight + 'px)'
    });
});

$('.fixed-booking .nav-tabs a').on('click', function () {
    var booking = $('.fixed-booking'),
        tabHeight = $('.fixed-booking .nav-tabs').outerHeight(),
        contentHeight = $('.fixed-booking .tab-content').outerHeight(),
        bothHeight = tabHeight + contentHeight
    ;
    booking.css({
        'transform': 'translate(0,-' + bothHeight + 'px)'
    });
});

此外，当点击其中一个导航栏标签时，只有点击两次才会改变位置。

提前致谢:)

Answer 1

除了他们最终使用的高度之外，我看不出每个处理程序之间有任何区别。你可以把它变成一个函数：

function setHeight(both) {
    var booking = $('.fixed-booking'),
        tabHeight = $('.fixed-booking .nav-tabs').outerHeight(),
        contentHeight = $('.fixed-booking .tab-content').outerHeight(),
        bothHeight = tabHeight + contentHeight
    ;
    newHeight = both ? bothHeight : tabHeight;
    booking.css({
        'transform': 'translate(0,-' + newHeight + 'px)'
    });
}

$('.fixed-booking').on('mouseenter', function() {setHeight(true)});
$('.fixed-booking').on('mouseleave', function() {setHeight(false)});
$('.fixed-booking .nav-tabs a').on('click', function() {setHeight(true)});

正如Pango所提到的，您可能希望进一步推广setHeight函数，以使基本选择器（.fixed-booking）更易于配置。这是higher order functions的一个很好的例子。

Answer 2

根据jQuery的文档http://api.jquery.com/on/，您应该可以在同一行中使用多个事件，如下所示：

$('.fixed-booking').on('mouseenter mouseleave click', function () {
var booking = $('.fixed-booking'),
    tabHeight = $('.fixed-booking .nav-tabs').outerHeight(),
    contentHeight = $('.fixed-booking .tab-content').outerHeight(),
    bothHeight = tabHeight + contentHeight
;
booking.css({
    'transform': 'translate(0,-' + bothHeight + 'px)'
});

}）;

如果你到jQuery文档的底部，它会显示如何＆＃34;将多个事件 - 一个放在mouseenter上，另一个放在mouseleave上到同一个元素＆＃34;

希望这有帮助。

谢谢！

简化糟糕的jQuery

2 个答案: