jquery - 图像在单击时发生变化并恢复

Question

我有一个包含 3 张图像的列表。

我希望它们中的每一个在单击时都更改为不同的图像，并在单击另一个时恢复回来。

我知道必须有一个简单的解决方案，但我陷入困境。

希望这是清楚的，如果不是我可以澄清更多。

这是我能找到的最接近我正在寻找的解决方案(有点)

https://stackoverflow.com/a/21491487

Answer 1

就像这个 JSFiddle ，我做了什么:

1. 向这些图像添加类名 .clickable 以便轻松选取它们。
2. 将每个点击图像存储在自定义data-clicked中，以便在点击时检索它并用它替换原始src图像
3. 此外，我们还添加了另一个空自定义data-normal，我们将其写入src值的值中以保留原始src 值，因此当我们单击图像时，我们利用它将原始值放回每个图像 src 并使用该值重置所有图像的点击值
4. 然后只需将 data-clicked 的值写入该图像 src 即可激活被单击的 img。

$('.clickable').each(function(){
    // initially, set each image data-normal value to that image src
    var eachSRC = $(this).attr('src');
    $(this).attr('data-normal', eachSRC);
});
$('.clickable').on('click', function(){
    $('.clickable').each(function(){
        // store each image's data-normal value in a variable and set each image src to this value
        var origSRC = $(this).attr('data-normal');
        $(this).attr('src', origSRC);
    });
    // replace the src of the image was clicked with the data-click value
    var hoverSRC = $(this).attr('data-clicked');
	$(this).attr('src',hoverSRC);
});

.clickable{
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class="clickable" src="//placehold.it/150x150?text=image1" data-normal="" data-clicked="//placehold.it/150x150/008800/ffffff/?text=image1">
<img class="clickable" src="//placehold.it/150x150?text=image2" data-normal="" data-clicked="//placehold.it/150x150/008800/ffffff/?text=image2">
<img class="clickable" src="//placehold.it/150x150?text=image3" data-normal="" data-clicked="//placehold.it/150x150/008800/ffffff/?text=image3" >

** 请注意，下次您发布问题时，请确保在其中提供代码片段，以便其他人可以更好地理解您的问题，并可以更轻松地对其进行修改，从而为您提供更好的答案，在 StackOverflow 中我们对此表示感谢提问得当且格式正确的问题