交换翻转img for src img onclick

Question

我想知道如何对我的图像进行编码（具有翻转/悬停状态），以便在单击它们时，即使光标不在img本身上，翻转状态仍然存在。并且在恢复到非翻转状态之前，可能已经点击了其他.sibling <img>。这是我正在使用的代码：

jquery的

$('img').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
});

HTML

<img id="button-all" src="images/button-all.png" data-rollover="images/button-all-rollover.png" />
<img id="button-adverts" src="images/button-adverts.png" data-rollover="images/button-adverts-rollover.png" />
<img id="button-musicvideos" src="images/button-musicvideos.png" data-rollover="images/button-musicvideos-rollover.png" />
<img id="button-films" src="images/button-films.png" data-rollover="images/button-films-rollover.png"/>

所以现在当我将鼠标悬停（翻转）到图像上时，它们会交换到数据翻转程序。但是当单击图像时（因为它们是带有jquery命令的按钮），我希望img的src与data-rollover src交换，这样当光标不再悬停在图像上时，data-rollover src状态遗迹。除此之外，我需要任何先前点击的图像以其原始的src路径恢复到原始（非数据翻转）状态。

1）翻转图像，它显示数据翻转状态（除非它已经被点击，因此在转换到数据翻转状态时不会改变）。

2）点击图片，它将src交换到数据翻转src

3）所有其他.sibling图像将恢复为原始的src状态。

希望这是有道理的！谢谢！