如何将其压缩成一个函数？

Question

我真的是 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);
});

Answer 1

您可以使用循环来做到这一点。

循环内的匿名函数用于防止中断 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

Answer 2

怎么样：

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

然后你可以为每个div调用它并覆盖如下：

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

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

Answer 3

尝试组合选择器

$(".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);
});

Answer 4

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

此外，将相同的 class 添加到所有 .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);
});

如何将其压缩成一个函数？

How to condense this into a single function?

javascript

jquery

dry

function