怎样才能做得更好？答案

【问题标题】：How could this be done better?怎样才能做得更好？
【发布时间】：2009-09-20 15:19:20
【问题描述】：

当鼠标悬停在任何导航链接或正文副本中的 div 上时，我试图定位我的导航背景和正文副本中的 4 个其他 div。

当鼠标悬停在正文副本中的四个 div 中的任何一个上时，其他三个 div 应该会褪色，并且导航 div 的背景颜色也应该改变

我可以使用它，但我是 javascript/jquery 的新手，我知道有更好的方法来做到这一点。

那会是什么？

到开发站点的链接是http://www.alienfactory.com/vision1/

每次看都觉得有点好笑，好像我正在尝试编写 javascript，就像它是 CSS 一样

这是一个代码 sn-p，它针对各种鼠标悬停目标重复 3 次以上

为了进一步说明，这里是完整的脚本。我知道有更好的方法，但是怎么做？

$('#services, #navservices').hover( 功能（） { $('#vision, #approach, #team').stop().fadeTo('slow', .2); $('#navigation').stop().animate({ backgroundColor: "#8ac2b7" }, 500); }, 功能（） { $('#vision, #approach, #team').stop().fadeTo('slow', 1); $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500); } ); $('#vision, #navvision').hover( 功能（） { $('#services, #approach, #team').stop().fadeTo('slow', .2); $('#navigation').stop().animate({ backgroundColor: "#9e97ca" }, 500); }, 功能（） { $('#services, #approach, #team').stop().fadeTo('slow', 1); $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500); } ); $('#approach, #navapproach').hover( 功能（） { $('#services, #vision, #team').stop().fadeTo('slow', .2); $('#navigation').stop().animate({ backgroundColor: "#e5b120" }, 500); }, 功能（） { $('#services, #vision, #team').stop().fadeTo('slow', 1); $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500); } ); $('#team, #navteam').hover( 功能（） { $('#services, #vision, #approach').stop().fadeTo('slow', .2); $('#navigation').stop().animate({ backgroundColor: "#cf1858" }, 500); }, 功能（） { $('#services, #vision, #approach').stop().fadeTo('slow', 1); $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500); } );

【问题讨论】：

标签： jquery

【解决方案1】：

你可以缓存元素：

var e1 = $('#vision, #approach, #team'),
    e2 = $('#navigation');
$('#services, #navservices').hover(
    function() {
        e1.stop().fadeTo('slow', .2);
        e2.stop().animate({ backgroundColor: "#8ac2b7" }, 500);
    },
    function() {
        e1.stop().fadeTo('slow', 1);
        e2.stop().animate({ backgroundColor: "#404040" }, 500);
    }
);

【讨论】：

【解决方案2】：

使用目标事件在所有 div 的一个悬停函数中汇总所有内容。这是一个可能的片段：

$( document ).hover( function( ev){
    function () {
        var target = $( ev.target);
        var elements = {'div_1', 'div_2', 'div_3', 'div_4'}; // all divs
        elements[target.attr('id')] = null; // only the other ones
        $(target ).doSomething(); // with the main div
        $.each( elements , function(i, el){
            $(el).doSomethingElse(); // with other divs
        }); 
    },
    function () {
        // the same concept as above
    }
});

【讨论】：

你能解释一下什么是目标事件吗？

【解决方案3】：

啊，我明白你的意思了。这个怎么样：

var eventOver = function() {
    $('#vision, #approach, #team').stop().fadeTo('slow', .2);       
    $('#navigation').stop().animate({ backgroundColor: $(this).data('fadeTo') }, 500);      
};
var eventOut = function() {
    $('#vision, #approach, #team').stop().fadeTo('slow', 1);
    $('#navigation').stop().animate({ backgroundColor: '#404040' }, 500);
}   
$('#services, #navservices').data('fadeTo', '#8ac2b7').hover(eventOver, eventOut);
$('#vision, #navvision').data('fadeTo', '#9e97ca').hover(eventOver, eventOut);
$('#approach, #navapproach').data('fadeTo', '#e5b120').hover(eventOver, eventOut);
$('#team, #navteam').data('fadeTo', '#cf1858').hover(eventOver, eventOut);

【讨论】：

【解决方案4】：

查看您的开发站点，我可以看到您希望顶部栏与您悬停在底部的区域颜色相同。这意味着您可以删除硬编码的颜色，只需查找您悬停在上面的项目的颜色。

为了使事情更简单，我建议您将所有部分放在底部，并为它们提供一个通用 CSS 类。对于这个例子，我将使用navSection。

$('.navSection').hover(function() {
    var bgColor = $(this).css('background-color');
    $(this).siblings().stop().fadeTo('slow', .2);
    $('#navigation').stop().animate({ backgroundColor: bgColor }, 500);
}, function() {
    $(this).siblings().stop().fadeTo('slow', 1);
    $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);   
});

这将适用于您链接到的页面，前提是您将 navSection 类添加到您想要悬停的区域。

【讨论】：