jQuery图像翻转更改页面上的所有图像

我试图在悬停时用其替代方法更改图像。我已经将第二张图像作为HTML属性，并且只是想将它们与jQuery交换，但不知何故，当我将鼠标悬停在图像上时，所有产品图像都将随当前的替代图像而改变。jQuery图像翻转更改页面上的所有图像

我的HTML结构如下：

<div class="product-tile"> 
    <div class="product-image"> 
     <a class="thumb-link" href="#"> 
      <img src="images/currentImage" data-alternative-img="images/altImg" /> 
     </a> 
    </div> 
</div>

这里是jQuery代码：

$('.tiles-container .product-tile').each(function() { 
    var $this = $(this).find('.thumb-link img'); 

    if ($this.data().alternativeImg) { 
     var img = $this.attr('src'); 
     var altImg = $this.attr('data-alternative-img'); 

     $this.on({ 
      mouseenter: function() { 
       $this.attr('src', altImg); 
       $this.attr('data-alternative-img', img); 
      }, 
      mouseleave: function() { 
       $this.attr('src', img); 
       $this.attr('data-alternative-img', altImg); 
      } 
     }); 
    } 
});

我在控制台与此代码周围玩过的图像正在采取正确地说，if语句也是如此，并且两个属性（src和data-alternative-img）都具有正确的值。改变属性的方式可能有两天了，因为图像正在被替换，所以任何指向正确方向的东西都会非常感激。

来源

2017-05-04 Georgi Stephanov

为什么你需要通过它循环？你可以选择一个公共选择器并附加事件处理程序，然后使用'this'来定位当前元素。 –

这是我最初尝试的，但行为是相同的，我认为我应该循环每个元素，以便更具体地捕捉它们。 –

使用'mouseover'和'mouseout'作为悬停事件，而不是'.attr（'data-alternative-img'）'use'.data（'alternative-img'）' –

相反.each功能，你可以直接写mouseenter/mouseleave功能

<div class="product-tile"> 
    <div class="product-image"> 
     <a class="thumb-link" href="#"> 
      <img src="images/currentImage" data-mouseenter-img="images/altImg" data-mouseout-img="images/currentImage" /> 
     </a> 
    </div> 
</div> 

$('.product-tile').on({ 
    mouseenter: function() { 
     var $this = $(this).find('.thumb-link img'); 
     if($this.data().mouseenter-img) { 
      $this.attr('src', $this.data('mouseenter-img')); 
     } 
    }, 
    mouseleave: function() { 
     var $this = $(this).find('.thumb-link img'); 
     if($this.data().mouseout-img) { 
      $this.attr('src', $this.data('mouseout-img')); 
     } 
    } 
});

来源

2017-05-04 06:25:53

如果这段代码不在每个循环中，那么'$（this）'是指什么？ –

是的，'$（this）'指的是窗口，因为它不会绑定任何东西。 –

你能解释一下为什么我们需要一个data-mouseout-img，当它和src一样时，它们都是我的代码中的缓存变量？ –

jQuery图像翻转更改页面上的所有图像

回答

相关问题