Question

我写了 some的一些文字,显示并暗中隐藏在工作人员网页上的信息。基本上有3个标志和3个描述。如果你在设计标志上 h,就会显示设计小组的描述和形象,反之亦然。我的守则就是这样做的:

$( .emblem img:first ).hover(
            function() {
                $( .description:eq(1), .description:eq(2) ).css({opacity : 0.2});
                $( .devStaff ).css({opacity : 0.2});
            },
            function(){
                $( .description:eq(1), .description:eq(2) ).css({opacity : 1});
                $( .devStaff ).css({opacity : 1});
            }
        );

        $( .emblem img:eq(1) ).hover(
            function() {
                $( .description:eq(0), .description:eq(2) ).css({opacity : 0.2});
                $( .designStaff ).css({opacity : 0.2});
            },
            function(){
                $( .description:eq(0), .description:eq(2) ).css({opacity : 1});
                $( .designStaff ).css({opacity : 1});
            }
        );

        $( .emblem img:eq(2) ).hover(
            function() {
                $( .description:eq(0), .description:eq(1) ).css({opacity : 0.2});
                $( .designStaff ).css({opacity : 0.2});
            },
            function(){
                $( .description:eq(0), .description:eq(1) ).css({opacity : 1});
                $( .designStaff ).css({opacity : 1});
            }
        );

现在,我想到这一点,我感觉到,这样做肯定有更好的办法,我不知道任何人是否能够提供一些建议?

Answer 1

总的来说,你应重复(http://en.wikipedia.org/wiki/Don t_repeat_your Self),

要求发挥更一般性的职能,如:

function fadeOut(eqNum1, eqNum2) {
    $( .description:eq( +eqNum1+ ), .description:eq( +eqNum2+ ) ).css({opacity : 0.2});
    $( .devStaff ).css({opacity : 0.2});
}
 function fadeIn(eqNum1, eqNum2){
    $( .description:eq( +eqNum1+ ), .description:eq( +eqNum2+ ) ).css({opacity : 1});
    $( .devStaff ).css({opacity : 1});
}

$( .emblem img:first ).hover(fadeOut(1,2), fadeIn(1,2) );

$( .emblem img:eq(1) ).hover(fadeOut(0,2),fadeIn(0,2));

$( .emblem img:eq(2) ).hover(fadeOut(0,1),fadeIn(0,1));

Answer 2

You can replace :first, :eq(1) and :eq(2) by :lt(3) :

    $( .emblem img:lt(3) ).hover(
        function() {
            $( .description:lt(2) ).css({opacity : 0.2});
            $( .designStaff ).css({opacity : 0.2});
        },
        function(){
            $( .description:lt(2) ).css({opacity : 1});
            $( .designStaff ).css({opacity : 1});
        }
    );

Answer 3

我遵循我刚才所写的这些规则,至少要看一看一看,用一比一等,作为你起码的工作。

http://www.artzstudio.com/2009/04/jquery- Performance-rules/

友情链接