如何将其浓缩为一个函数？答案

【问题标题】：How to condense this into a single function?如何将其浓缩为一个函数？
【发布时间】：2015-06-14 05:49:54
【问题描述】：

我对 JS/JQuery 真的很陌生，我不知道如何保留此代码 D.R.Y，如果它甚至可能的话我都不知道。我正在使用 JQuery 来实现带有图像的悬停效果。 Box1 是 div，img_hover_effect 是悬停时的叠加层。

JS：

$('.box1').hover(function () {
    $('.img_hover_effect').fadeIn(500);
}, function () {
    $('.img_hover_effect').fadeOut(400);
});
$('.box2').hover(function () {
    $('.img_hover_effect_2').fadeIn(500);
}, function () {
    $('.img_hover_effect_2').fadeOut(400);
});
$('.box3').hover(function () {
    $('.img_hover_effect_3').fadeIn(500);
}, function () {
    $('.img_hover_effect_3').fadeOut(400);
});

【问题讨论】：

标签： javascript jquery function dry

【解决方案1】：

在.box 元素上使用data 属性来存储target 元素选择器。

另外，为所有.boxn 元素添加相同的类，以在所有元素上绑定event。

HTML：

<div class="mybox box" data-target=".img_hover_effect"></div>
<div class="mybox box2" data-target=".img_hover_effect_2"></div>
<div class="mybox box3" data-target=".img_hover_effect_3"></div>

Javascript：

$('.mybox').hover(function () {
    $($(this).data('target')).fadeIn(500);
}, function () {
    $($(this).data('target')).fadeOut(400);
});

【讨论】：

【解决方案2】：

您可以使用循环来执行此操作。

循环内的匿名函数用于防止破坏jQuery事件，试试：

for(var i = 1; i <= 3; i++){
    (function(num){
        $('.box' + num).hover(function() {
            $('.img_hover_effect' + (num == 1 ? "" : num)).fadeIn(500)
        }, function(){
            $('.img_hover_effect' + (num == 1 ? "" : num)).fadeOut(400)
        })
    })(i)
}

Demo

【讨论】：

我必须同意@FelixKling 我很难理解为什么会这样，我知道 for 循环会添加到“.box”，但是“（num ==1 ？”）： num))" 部分我不明白。
@Steven 是一个三元运算符：msdn.microsoft.com/library/be21c7hw(v=vs.94).aspx。表示：如果 num 等于 1 或第一项然后（不添加数字），否则添加数字
num == 1 ? "" : num 等价于if (num == 1){ $('.img_hover_effect' + "") } else { $('.img_hover_effect' + num) }
@wZVanG 那么 num 从哪里获得它的价值呢？是基于for循环的吗？
参数num，它来自循环计数器})(i)。对不起我的英语不好。

【解决方案3】：

怎么样：

function hover(div, overlay) {
    $(div).hover(function() {
        $(overlay).fadeIn(500);
    }, function() {
        $(overlay).fadeOut(400);
    });
}

然后你可以为每个div和overlay调用它，如下：

hover('.box1', '.img_hover_effect');

所以你有一个函数可以用于 500 毫秒的淡入和 400 毫秒的淡出。如果您需要不同的淡入和淡出间隔，您甚至可以使用这些作为附加参数来调整函数。

【讨论】：

【解决方案4】：

尝试组合选择器

$(".box1, .box2, .box3").hover(function (e) {
    $(".img_hover_effect_" + e.target.className.slice(-1)).fadeIn(500);
}, function (e) {
    $(".img_hover_effect_" + e.target.className.slice(-1)).fadeOut(400);
});

【讨论】：