1

我不希望在链接悬停之前加载图像，所以这是脚本，但它不起作用，有人可以帮我纠正它吗？我为每个链接添加了一个事件侦听器，并在鼠标悬停时调用了一个设置图像的函数。为了让事情更有趣，我们可以在这里复制一下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。

4

4 回答 4

11

.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()

于 2012-04-23T13:15:15.917 回答
1

var elem = $(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.attr('data-original'));
});

或保持原样，不要寻找图像

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

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.attr('data-original'));
});
于 2012-04-23T13:15:45.720 回答
0

您已将悬停绑定到 img 元素，因此您找不到 img 子元素。只需使用它，或将悬停更改为 .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'));
});
于 2012-04-23T13:15:14.067 回答
0

jQuery.find() 搜索孩子。您已经使用“.tip”-选择器找到了 img。

var elem = $(this);
于 2012-04-23T13:19:31.447 回答