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

Answer 2

var elem = $(this).find('img');＆lt; - 当您是图像时，您正在寻找图像。

将您附加的元素替换为

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

Answer 3

您已将悬停绑定到img元素，因此您无法找到img子级。只需使用它，或将悬停更改为.tip触发器。

$('.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（）搜索孩子们。您已经使用“.tip”选择器找到了img。

var elem = $(this);

jQuery在悬停时更新图像src

4 个答案: