Question

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

问题在于，如果我从悬停在一个产品图像上并快速转移到另一个产品图像，那么第一个产品图像会获得第二个产品firstimage，因此错误的产品图像。

代码看起来像这样：

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

我想这与fadeIn / fadeOut有关，所以$（this）在fadeIn开始之前已经改变了。有没有更好的方法来避免这个问题呢？当我删除fadeIn / fadeOut时，问题不会发生，但这是我想要的，因为没有它，传输就很难了。

Answer 1

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

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

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

Answer 2

而不是

If SourceWorksheet = "DD" Then
                For lColumn = 2 To LastColumn

                    .FullSeriesCollection(lColumn - 1).Name = "=DD!$" & Col_Letter(lColumn) & "$1"
                    .FullSeriesCollection(lColumn - 1).Values = "=DD!$" & Col_Letter(lColumn) & "$3:$" & Col_Letter(lColumn) & "$" & LastRow

                Next lColumn

            End If

        End With

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

yum reinstall xorg*

jQuery - .hover（）在没有hover = img

2 个答案: