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

使用data元素上的.box属性来存储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);
});

Answer 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

Answer 3

怎么样：

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

然后你可以为每个div和叠加调用它，如下所示：

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

所以你有一个函数可以用于500ms的fadeIn和400ms的fadeOut。如果你需要不同的fadeIn-和fadeOut-intervalls，你甚至可以用这些作为附加参数来调整函数。

Answer 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);
});

如何将其压缩为单个函数？

4 个答案: