jQuery在悬停时更新图像src

Question

我不希望图像加载,直到链接悬停,所以这是脚本,但它不起作用,有人可以帮我纠正它吗？我为每个链接添加了一个事件监听器,并在mouseover上调用了一个设置图像的函数.为了使事情更有趣,我们可以在这里复制lazyload,并使用data-original属性:)

例如:这是HTML代码:

<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>

然后,添加一个事件监听器:

码:

// 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'));
});

对于现场演示,您可以看到此页面http://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.html 脚本的上述部分仅添加到"A"类别中的第一个字母ALEX.

Answer 1

.tip 已经是图像,因此您无法找到图像 $(this).find('img');

试着改为

$('.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'));
});

也使用.data()方法而不是.attr()