CODEWITHSUNDEEP
javascriptjquery
user595419
user595419

Reputation:

Is there any better way to write my jQuery Code?

I've written some JavaScript to display and subtly hide pieces of information on a staff page. Essentially, there are 3 emblems and 3 sets of description. If you hover over the design emblem, then it will show the design team's description and images, vice versa. Here is my code to do this:

$('.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});
            }
        );

Now looking at this, I feel that there is definitely a better way to do this and I was wondering whether anyone would be able to offer some advice?

Upvotes: 1

Views: 106

Answers (3)

Joseph Szymborski
Joseph Szymborski

Reputation: 1283

Generally, you shouldn't repeat yourself (http://en.wikipedia.org/wiki/Don't_repeat_yourself),

Try calling a more general function, like this:

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

Upvotes: 1

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

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

Upvotes: 1

Phil
Phil

Reputation: 4092

I follow these rules I bookmarked a while ago, I would defiantly at least follow the first, use an #id rather than .class as a minimum you do.

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

Upvotes: 0

Related Questions