Forums

Techguy172

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.

<?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 );?> 
	
<div class=\"imageHolder\"
	<a class=\"hoverImage\" href=\"#\"><img src=\"<?php echo $data['image']; ?>\" height=\"100px\" width=\"100px\"/></a>  
	<?php the_title(); ?>
	
</div>
<div class=\"MoreInfo aHover\">
<?php
	the_excerpt();
?>
</div>
<?php
	endwhile;
	endif; ?>

And my current jquery.

$(document).ready(function(){

			$(\".hoverImage\").hover(function(){

				$(\".MoreInfo\").removeClass('aHover');

			},function(){

				$(\".MoreInfo\").addClass('aHover');

			});

		});

CSS

.aHover { display: none; }

jamy_za

Try this:

$(document).ready(function(){

         $(\".hoverImage\").hover(function(){
            $(this).children(\".MoreInfo\").toggleClass('aHover');
         });

 });

Techguy172

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

jamy_za

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />
<style type=\"text/css\">
.box { margin: 50px; background: green; height: 100px; width: 100px;}
.active { display: none; }
</style>
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2\"></script>
<script type=\"text/javascript\">
$(document).ready(function(){ 
		
	$(\".box\").hover(function() {
            $(this).children(\"p\").addClass('active');

         },function(){

            $(this).children(\"p\").removeClass('active');

	});
});
</script>
</head>
<body>

<div class=\"box\">
  <p>first test</p>
</div>

<div class=\"box\">
  <p>second test</p>
</div>

<div class=\"box\">
  <p>third test</p>
</div>

<div class=\"box\">
  <p>fourth test</p>
</div>

</body>
</html>

treehouse : what would you like to learn today?

Forums

Jquery in a Wordpress loop