javascript - 单击时使用 jQuery 更改图像不起作用

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

这个 block 背后的想法很简单 - 我添加了一个 current类来跟踪当前哪些元素处于事件状态，然后使用 image2.png 使其元素图像在悬停和鼠标移开时保持不变 |代表事件状态。它有效，但是当我单击另一个元素时，之前单击的元素的行为与常规元素不同(即它在悬停和鼠标移开时保持 image2.png 属性，而不是像为 .regular-image 类编码一样)。我做错了什么？我觉得解决方案可能非常简单明了，但我自己找不到。任何帮助或想法将不胜感激!感谢您抽出时间，祝您度过愉快的一天。

UPD

总结一下我的帖子，我现在想要达到的是改变image2.png返回image.png单击其他图像并使其表现如所述.regular-image在 javascript 代码中(悬停时将其更改为 image2.png，鼠标离开时将其更改为 image.png)

UPD 2

在其他开发人员的帮助下，我几乎得到了我想要的行为。我改了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返回image.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'));
});