Javascript 简化糟糕的jQuery

想知道是否有人能帮我简化一下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)'
    });
});

此外，当单击其中一个导航栏选项卡时，仅当我单击两次时，位置才会更改

---

提前感谢：）

除了最终使用的高度之外，我看不出每个处理器之间有任何差异。您可以将其转换为一个函数：

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

）更易于配置。这是一个很好的例子。

除了最终使用的高度之外，我看不出每个处理器之间有任何差异。您可以将其转换为一个函数：

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

）更易于配置。这是一个很好的例子。

根据jQuery的文档，您应该能够在同一行中使用多个事件，如下所示：

$('.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文档的底部，它将显示如何“将多个事件（一个在mouseenter上，一个在mouseleave上）附加到同一元素”

希望这有帮助

---

谢谢大家!

根据jQuery的文档，您应该能够在同一行中使用多个事件，如下所示：

$('.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文档的底部，它将显示如何“将多个事件（一个在mouseenter上，一个在mouseleave上）附加到同一元素”

希望这有帮助

---

谢谢大家!

将核心逻辑提取到一个函数中。将其中的每一个都转换成一个通用函数，其中包含不同的变量placeholder（选择器、translate的+___+变量等，因为它们都做相同的基本事情。然后将变量分配到顶部，并将其作为参数传入。将核心逻辑跟踪到函数。将它们中的每一个转换为一个通用函数，其中包含不同的变量放置文件夹（选择器、translate的+_______;变量等，因为它们都做相同的基本事情。然后将变量分配到顶部，并将它们作为参数传入。杰米，我知道我想要的是什么，只是不确定想要多少。非常感谢！我更新了我的答案，因为函数中有一个小的差异。一个取

tabHeight

剩下的部分都在哪里？这是有意的吗？如果你真的想简洁，你可以为“.fixed booking”也创建一个变量。看起来newHeight需要var关键字。Reecavail我已经更新了答案，允许你在两者之间切换，或者只使用布尔值来切换制表符高度。@Pango，我同意。我本来打算使用高阶函数根据要使用的高度和选择器返回回调，但当有人学习时，无需过度复杂。我将添加您的注释作为完整性编辑。嘿，Jamie，是的，这是有意的，谢谢。现在一切都很好，只是出于某种原因，它仍然需要在导航栏上单击两下r tabs a来更新高度，有什么想法吗？干杯，杰米，我知道我想要的只是不知道要多少。非常感谢！我更新了我的答案，因为函数中有一个小差异。一个取

tabHeight

，其余取

bothHeight

。这是有意的吗？如果你真的想要简洁，你可以创建一个变量f或者“.fixed booking”。看起来newHeight需要var关键字。Reecavail我已经更新了答案，允许您使用布尔值在使用两者或仅使用制表符高度之间切换。@Pango，我同意。我本来打算使用更高阶的函数根据要使用的高度和选择器返回回调，但没有必要当有人在学习时，我会将你的评论添加为完整性编辑。嘿，杰米，是的，这是有意的，谢谢你。现在一切都很好，只是出于某种原因，它仍然需要在导航栏选项卡上点击两下来更新高度，有什么想法吗？使用多个事件是个好主意，但实际上我有一点不同n使用的回调函数和选择器。使用多个事件是个好主意，但实际上回调函数和选择器之间有一点差别。