点击后图像会发生变化并恢复原状

Question

我有3张图片的清单。

我希望他们每个人在点击时更改为不同的图像，并在点击其他图像时恢复。

我知道必须有一个简单的解决方案，但我被卡住了。

希望明白，如果不是，我可以澄清更多。

这是我能找到的最接近的解决方案（有点）

https://stackoverflow.com/a/21491487

Answer 1

与JSFiddle一样，我做了什么：

1. 为这些图片添加班级名称.clickable以便轻松选择。
2. 将每个点击图片存储在自定义data-clicked中，以便检索它并在点击时替换原始src图片。
3. 我们还添加了另一个空自定义data-normal，我们将src值写入其中以保留原始src值，以便我们制作当我们点击图片并使用此值重置所有图片点击值时，使用它将原始值放回每个图像src
4. 然后通过将img的值写入此图片data-clicked来激活点击的src。
＆＃13;
＆＃13;
$('.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);
});
＆＃13;
.clickable{
    cursor:pointer;
}
＆＃13;
<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" >
＆＃13;
＆＃13;
＆＃13;

** 请注意，下次发布问题时请确保在其中提供代码段，以便其他人可以更多地了解您的问题，并且可以更轻松地修改它以便为您提供更好的答案，在StackOverflow中，我们感谢好问和格式化的问题