jQuery - 使隐藏全部/显示此div图像更通用

我有以下jquery代码.

基本上我将有几个重叠的div和所有重叠div的右边的链接列表.当悬停在链接上时,链接的指定div将淡入.

我有以下代码,它可以工作(它使用默认窗口的示例图片),但如果有人可以想出一种方法来优化它或使其通用,我会很感激.

    

    


    




    



    



    




    







    Show Sunset
    Show Winter
    Show Blue Hills
    Show Waterlillies

    

    


    




    



    



    




    







    Show Sunset
    Show Winter
    Show Blue Hills
    Show Waterlillies

谢谢Matt,TM和kRON,你的回答真的很有帮助.

我不觉得我完全解释了自己,但是TM提供了我正在寻找的答案.

我想跟随DRY,这次提供的代码TM帮助我最好,因为它不需要我改变我的标记,只需要jQuery代码.

再次,非常感谢.令我惊讶的是,我得到了答案.保持伟大的工作.

你可以做的第一件事就是把它变得更干净,用更通用的东西替换所有那些类似的调用.

(注意:假设所有这些都在里面document.ready())

$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
    var selector = $(this).data('target');
    $(".contentdiv").addClass("inactive");
    $(selector).removeClass("inactive");
    $(".inactive").fadeOut(500);
    $(selector).fadeIn(500);
});

使用逗号分隔的选择器是使用jQuery服从DRY的好方法.

我$(element).data()用来设置和检索元素上的一些数据,在这种情况下,用于更新相应元素的选择器.

此外,只是为了更清晰的视觉效果$(document).ready(),如果您愿意,可以使用以下代码.这是完全相同的事情,只是一种不同的语法.

$(function() {
   //DOM ready
};