Question

我在使用jQuery更改图像方面遇到了麻烦。我有以下标记：

<div class="row">
    <img src="image.png" class="download-image regular-image" />
    <div class="options">
         <p>download</p>
    </div>

    <img src="image.png" class="download-image regular-image" />
    <div class="options">
         <p>download</p>
    </div>
</div>

并使用以下代码来操作此标记：

$('.regular-image').hover(function() {
    $(this).attr('src', 'image2.png');
}. function() {
    $(this).attr('src', 'image.png');
}

这段代码非常直接，我对它没有任何问题，但最近我引入了另一个函数来保持活动图像（即如果单击元素则显示一个）：

$('.download-image').click(function(e) {
     e.stopPropagation();
     $(this).next().toggle();
     $('.download-image').removeClass('current');
     $(this).addClass('current');
     if ($('.download-image').hasClass('current')) {
         $(this).hover(function() {
              $(this).attr('src', 'image2.png');
         }, function() {
              $(this).attr('src', 'image2.png');
         }
     }
}

这个块背后的想法很简单 - 我添加了一个current类来跟踪当前活动的元素，然后使用image2.png使其元素图像在悬停和鼠标移动时保持不变代表活跃状态。它可以工作但是当我点击另一个元素时，之前点击的元素不像常规元素（即它保持image2.png属性悬停和鼠标移出而不是像{{1}编码一样}）。我做错了什么？我觉得解决方案可能是愚蠢容易和直截了当但我自己无法找到它。任何帮助或想法将受到高度赞赏！感谢您花时间和美好的一天。

UPD

总结一下我的帖子，我想要达到的目的是在点击其他图片时将.regular-image更改回image2.png，并使其行为与javascript代码中描述的image.png相同（在鼠标悬停时将鼠标悬停在.regular-image时将其更改为image2.png

UPD 2

与开发者同行＃39;帮助我几乎得到了我想要的行为。我将image.png事件更改为：

click

只有当我明确地将鼠标悬停在图像上并将其鼠标移出时，它才有效，但每次点击其他图像时我都需要将$(".download-image").click(function (event) { event.stopPropagation(); $(this).next().toggle(); $('.download-image').removeClass('current'); $(this).addClass("current"); $(document).delegate('.current','mouseover',function() { $(this).attr("src", "/image2.png"); }); $(document).delegate('.current','mouseout',function() { $(this).attr("src", "/image2.png"); }); });更改回image2.png。

Answer 1

您的代码中似乎有错误。请检查下面提到的代码。

$('.regular-image').hover(function() {
    $(this).attr('src', 'image2.png');
}, function() {
    $(this).attr('src', 'image.png');
});

如果您通过ajax调用添加图像，请使用下面提到的代码。

$(document).on('.regular-image','hover',function() {
    $(this).attr('src', 'image2.png');
}, function() {
    $(this).attr('src', 'image.png');
});

数据元素

<img data-default-image='image1.png' src='image1.png' />

$(document).delegate('button','click',function(){
   $(this).closest('img').attr('src',$(this).closest('img').data('default-image'));
});

Answer 2

尝试使用

e.preventDefault();

而不是

e.stopPropagation();

我坦率地说，不明白你想通过以下代码做什么：

$(this).hover(function() {
              $(this).attr('src', 'image2.png');
         }, function() {
              $(this).attr('src', 'image2.png');
         }

你确定应该有两条相同的线吗？

Answer 3

（代表OP发布）。

我在删除src类的同一时刻通过更改.current属性找到了获取所需行为的方法。我的代码现在看起来像这样：

$(".download-image").click(function (event) {
    event.stopPropagation();
    $(this).next().toggle();
    $('.download-image').removeClass('current').attr('src', 'image.png');
    $(this).addClass("current");
    $(document).delegate('.current','mouseover',function() {
        $(this).attr("src", "image2.png");
    });
    $(document).delegate('.current','mouseout',function() {
        $(this).attr("src", "image2.png");
    });
});

点击jQuery更改图像并不起作用

3 个答案: