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）都是正确的值。改变属性可能有些问题，我现在无法弄清楚2天，因为图像在任何地方都被替换，所以任何指向正确方向的都会非常感激。

Answer 1

您可以直接编写.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'));
        }   
    }
});

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

1 个答案: