Grow your CSS skills. Land your dream job.

Jquery in a WordPress loop

  • # March 20, 2010 at 10:04 pm

    Hey guys,

    So I’m trying to use jquery in a wordpress loop, and i’ll start off by saying I’m new to jquery so this is a learning experience. I’m trying to jquery to display information about the post when you roll over the image, I’m able to do that now but the problem is when I roll over one image, It displays the information for all the images, when I only want it to show it for the image I’m on. I think the problem is I’m using the same class name for every image. I don’t know whether I need to generate a different class name for each item, and get it that way in jquery, or if there’s another way. Either way I’m out of ideas and don’t know what to do.

    Thanks in advance.

    Code:
    < ?php global $query_string; query_posts($query_string. '&showposts=8&offset=5');
    if(have_posts()) : while (have_posts()) : the_post();
    $data = get_post_meta($post-> ID, ‘key’, true );?>

    < ?php
    endwhile;
    endif; ?>

    And my current jquery.

    Code:
    $(document).ready(function(){

    $(“.hoverImage”).hover(function(){

    $(“.MoreInfo”).removeClass(‘aHover’);

    },function(){

    $(“.MoreInfo”).addClass(‘aHover’);

    });

    });

    CSS

    Code:
    .aHover { display: none; }
    # March 22, 2010 at 5:15 am

    Try this:

    Code:
    $(document).ready(function(){

    $(“.hoverImage”).hover(function(){
    $(this).children(“.MoreInfo”).toggleClass(‘aHover’);
    });

    });

    # March 22, 2010 at 6:32 pm

    No, I’m afraid that did nothing, before it would show all of them, now nothing happens upon hover.

    Here’s a video showing the problem: http://www.youtube.com/watch?v=Lvjh_323dgs

    Any other ideas, thanks for trying

    # March 22, 2010 at 7:30 pm

    It is doing that because you are selecting every .MoreInfo on the page. It works the same as a css selector.
    Get a completely blank html file and paste this in and save and open:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    first test

    second test

    third test

    fourth test


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".