jQuery Image rollover 改变页面上的所有图像

Question

我正在尝试使用悬停时的替代图像来更改图像。我有第二张图片作为 HTML 属性，只想用 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）都具有正确的值。更改属性可能有问题，我现在两天都想不通，因为图像到处都在被替换，所以任何指向正确方向的人都会非常感激。

Answer 1

你可以直接写mouseenter/mouseleave函数来代替.each函数

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