jQuery在悬停时更新图像src

Question

I don't want the images to load until the link is hovered, so for that here is the script but it's not working, can someone help me in correcting it? I added an event listener to each link, and on mouseover called a function that sets the image. To make things more interesting, we can copy lazyload a bit here and also use the data-original property :)

For example: this is the HTML Code:

<li>
   <a href="#" class="tip_trigger">
      <img class="tip" alt="300 Grams"
              data-original="https://lh5.googleusom/-qCRpw.../300%2520.jpg"
              src='empty.gif' width="90" height="90"/>
      Alex
   </a>
</li>

Then, add an event listener:

Code:

// call for each element with the class 'tip' that's being hovered upon
$('.tip').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

for a live demo, you can see this page http://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.html the above part of script is only added to the first letter ALEX in 'A' Category.

Answer 1

.tip is already the image so you cannot find an image with $(this).find('img');

try instead

$('.tip_trigger').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.data('original'));
});

use also .data() method instead of .attr()

Answer 2

var elem = $(this).find('img'); <-- you are looking for an image when this is the image.

Either replace the element you attach hover to

$('.tip_trigger').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

or keep it the way it is and do not look for an image

$('.tip').hover(function()
{
   var elem = $(this);

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

Answer 3

You have bound the hover to the img element, therefor you can't find a img child. Just use this, or change the hover to .tip_trigger.

$('.tip_trigger').hover(function() // That should do the trick
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});

Answer 4

jQuery.find() searches children. You have already found the img with your ".tip"-selector.

var elem = $(this);