Как сконденсировать это в одну функцию?

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'); 

Таким образом, у вас есть функция, которая может использоваться для fadeIn 500 мс и fadeOut 400 мс. Если вам понадобятся разные fadeIn- и fadeOut-intervalls, вы можете даже настроить функцию с ними в качестве дополнительных параметров.

Answer 3

Try объединения селекторов

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

Используйте 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); 
});