jQuery Effects in PHP While Loop

Question

Ok I have a list of featured paintings to show on the Index. I am displaying them using a while loop to get the details from the database.

I want to create a jQuery effect for when the user hovers over the image, the div of that picture appears.

The problem is is that if i were to hover on the first one, the first one's div is ok, but if i were to hover and leave the second one, it would affect the first one. Code below:

Script

<script>
  $(document).ready(function(){
    $("#featuredImage img").hover(function(){
    $("#details").fadeOut();
   });
  });
</script>

PHP While

<ul id="featured">
 <?php
  $result = mysqli_query($con,"SELECT * FROM paintings WHERE featured=1");
   while($row = mysqli_fetch_array($result))
    {
     $id = $row['id'];
     $name = $row['name'];
     $desc = $row['longDesc'];
     $cost = $row['cost'];
     $qty = $row['quantity'];
     $img = $row['imageFilename'];
     $type = $row['type'];
     echo "
      <li id='featuredImage'>
      <div id='featuredImage'><div id='details'>$name</div><img src='/$img'></div>
      </li>";
    }
 ?>
</ul>

1. ids are unique across the whole document; 2. you don't need js for that, CSS is enough. — moonwave99
– moonwave99, Commented Jun 1, 2013 at 12:56
css transitions dont work in 30% of all browsers. caniuse.com/css-transitions so its not really recommended for real production, unless you dont care the 20% — user1721135
– user1721135, Commented Jun 1, 2013 at 13:14

Smern · Accepted Answer · 2013-06-01 13:02:56Z

2

Try this:

  $(document).ready(function(){
    $(".featuredImage img").hover(function(){
    $(this).siblings(".imgDetails").fadeOut();
   });
  });

ID's are meant to be unique, use classes instead to match my code above... something like this:

  <li class='imageWrap'>
  <div class='featuredImage'><div class='imgDetails'>$name</div><img src='/$img'></div>
  </li>

Demonstration: http://jsfiddle.net/UHXqd/

edited Jun 1, 2013 at 13:02

answered Jun 1, 2013 at 12:56

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

luk2302 · Accepted Answer · 2013-06-01 13:10:45Z

0

What your trying to do is easy to achieve: Basically change $("#details").fadeOut(); to $(this).siblings("#details").fadeOut();. But there are other things wrong with your code too: You have multiple domElements with the same ID, what is quite unfortunate, IDs should be unique. My advice: change the echo to

<li class='imageContainer'>
  <div class='featuredImage'><div class='details'>$name</div><img src='/$img'></div>
</li>

And from here on dont use the '#' in the selectors, use the '.' to select classes, not ids.

$(".featuredImage img").hover(function(){
  $(this).siblings(".details").fadeOut();
});

You should use siblings() because the details-div is on the same level as the image.

edited Jun 1, 2013 at 13:10

answered Jun 1, 2013 at 13:05

luk2302

57.5k24 gold badges108 silver badges151 bronze badges

Collectives™ on Stack Overflow

jQuery Effects in PHP While Loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related