Question

I am trying to create a jQuery hover function that will highlight a different section of the page depending on what number EQ (index position number) the div is.

What I want to do is say “when you hover over the #photoContent div, check what it’s EQ number is. If it’s the Xth div, then highlight the Yth p in the sidebar”

    $('#photoContent div').hover(function () {  
        if( $(this).filter(':lt(5)') ) {
            $('#photoSidebar').find('p:eq(0)').addClass('currentPhoto');
        }

        if( $(this).filter(':gt(5)') ) {
            $('#photoSidebar').find('p:eq(1)').addClass('currentPhoto');
        }
    }, function () {
        $('#photoSidebar').find('p').removeClass('currentPhoto');
    });

The above code obviously does not accomplish this, but the concept/functionality is what I’m going for. Thanks for your help!

Answer 1

First, hoverIntent is not a built-in jQuery event. Do you mean hover(fnOver, fnOut) ?

Second, you could rewrite the if statements to explicitly test for a match:

if($(this).is(":lt(5)")) { 
    $('#photoSidebar p').eq(0).addClass('currentPhoto');
}

if($(this).is(":gt(5)")) {
    $('#photoSidebar p').eq(1).addClass('currentPhoto');
} 

OR

var idx = $(this).index();
if(idx > 5) { 
    $('#photoSidebar p').eq(0).addClass('currentPhoto');
}

if(idx < 5) {
    $('#photoSidebar p').eq(1).addClass('currentPhoto');
} 

Also, this is just my style, but why not use regular quotes " instead of single quotes?