jQuery - .hover() 不悬停时改回 img = 错误的 img

Posted 2023-05-08

【中文标题】jQuery - .hover() 不悬停时改回 img = 错误的 img

【英文标题】：jQuery - .hover() change back img when not hover = wrong img

【发布时间】：2017-06-12 23:27:18

【问题描述】：

我有一个产品图片列表，每个产品都有两张不同的图片。第一个在未悬停在图像上时显示，第二个在悬停在图像上时显示。

问题是，如果我将鼠标悬停在一个产品图像上并快速移动到另一个产品图像，那么第一个产品图像会得到第二个产品的第一个图像，所以产品图像是错误的。

代码如下所示：

html：

<div id="listing">
 <ul>
  <li data-artnr="3212" class="product"> 
    <div class="image"> 
      <a href="/">
        <img src="/pathTo/image/3212.jpg" class="loaded">
      </a>
    </div>
  </li>
  <li data-artnr="3213" class="product"> 
    <div class="image"> 
      <a href="/">
        <img src="/pathTo/image/3213.jpg" class="loaded">
      </a>
    </div>
  </li>
  <li data-artnr="3214" class="product"> 
    <div class="image"> 
      <a href="/">
        <img src="/pathTo/image/3214.jpg" class="loaded">
      </a>
    </div>
  </li>
 </ul>
</div>

jQuery:

$("#listingContent").find(".product").hover(function () 
  $product = $(this);
  $image = $(this).find(".loaded");
  var artnr = $product.data("artnr");
  window.oldImage = $image.attr("src");
  var newImage = "/pathTo/image/"+artnr+"_topoffer.jpg";
  $product.data("old", oldImage);

  $image.fadeOut(150, function () 
    $(this).load(function () 
      $(this).fadeIn(150);
    ).attr("src", newImage);
  );
,
function () 
  $image.fadeOut(150, function () 
    $(this).load(function () 
      $(this).fadeIn(150);
    ).attr("src", oldImage);
  );
);

我猜这与淡入/淡出有关，因此 $(this) 在淡入开始之前就已经改变了。 有没有更好的方法来避免这个问题？当我删除淡入/淡出时问题不会发生，但这是我想要的，因为没有它传输会很困难。

【问题讨论】：

您好，如果您可以为问题创建小提琴，那将是一个很大的帮助，这样我们更容易解决它。谢谢:)

【参考方案1】：

首先请注意您的 HTML 无效。 li 元素只能是 ul 的子元素，不能是 div 的子元素。

问题的原因是因为您使用了全局 oldImage 变量。最好使用存储在 .product 元素上的“旧”data 属性，这样在元素之间快速悬停时就不会出现竞争条件。 另请注意，您不需要在每个mouseenter/mouseleave 上重新绑定load() 事件。您可以将它单独放置在所有必需的元素上。试试这个：

$('#listingContent .product .loaded').load(function() 
  $(this).fadeIn(150);
);

$("#listingContent .product").hover(function() 
  var $product = $(this);
  var $image = $product.find(".loaded");
  var artnr = $product.data("artnr");  
  $product.data("old", $image.attr('src'));

  $image.fadeOut(150, function() 
    $(this).attr("src", "/pathTo/image/" + artnr + "_topoffer.jpg");
  );
, function() 
  var $product = $(this);
  var $image = $product.find(".loaded");

  $image.fadeOut(150, function() 
    $(this).attr("src", $product.data('old'));
  );
);

【讨论】：

感谢关于 ul 的注释，我在代码中做了一些改动，删除了一些对这个问题不重要的东西，ul 也随之而来。它现在在问题中进行了编辑。关于您的解决方案，它似乎有效，但现在我得到了 display: none 作为图像上的内联样式。我认为这与其他一些插件有关，可能是延迟加载。我会尝试找出是什么原因造成的，因为从我在你的回答中可以看出，这不应该完全是因为这段代码，对吗？

内联 display: none 将来自 fadeOut()，尽管 fadeIn() 应该再次将其改回。可能值得将上面的部分注释掉，以查看何时添加。

【参考方案2】：

而不是做

window.oldImage = $image.attr("src");

您应该将 oldImage 存储在元素本身中，即在某些属性中。

$product.data("old", $image.attr("src"));