jQuery Bild Rollover ändert alle Bilder auf der Seite

Question

Ich versuche, ein Bild mit seiner Alternative auf Hover zu ändern. Ich habe das zweite Bild als HTML-Attribut und möchte es nur mit jQuery tauschen, aber irgendwie, wenn ich über ein Bild schwebe, werden alle Produktbilder mit der aktuellen Alternative geändert.

Meine HTML-Struktur ist wie folgt:

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

Und hier ist der jQuery-Code:

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

Ich habe mit diesem Code in der Konsole herumgespielt und das Bild aufgenommen wird korrekt funktioniert auch die if-Anweisung so wie sie sollte und beide Attribute (src und data-alternative-img) haben ihren korrekten Wert. Es ist wahrscheinlich etwas falsch mit der Änderung der Attribute, die ich seit 2 Tagen nicht herausfinden konnte, da das Bild überall ersetzt wird, so dass jeder, der in die richtige Richtung zeigt, sehr geschätzt wird.

Answer 1

Statt .each Funktion können Sie mouseenter/mouseleave Funktion

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