javascript - Jquery 翻转，点击状态问题

Question

请原谅我对 Jquery 的不懂，但我有一些 jquery 代码可以为我做翻转:

$("img.rollover").hover(function () {
    this.src = this.src.replace("_off","_on");
  }, 
  function () {
    this.src = this.src.replace("_on","_off");
});

本质上只是将鼠标悬停在一堆图像上时将图像从 image_on.jpg 切换到 image_off.jpg，现在单击时我想永久设置“image_on”的状态，但悬停状态似乎会覆盖它，但它并没有不要保持“_on”，我猜这与事件绑定(bind)有关？我似乎也无法做到这一点，所以如果用户单击一个图像，它将其设置为打开，但如果他们单击另一张图像，则将前一个图像返回到“_off”状态并将当前图像设置为“_on”状态。

感谢任何帮助，ta。

Answer 1

当链接实际处于事件状态时，我会向链接添加一个“选定”类，并对其进行过滤。

$("img.rollover").bind('click',function(){
    $('img.rollover').removeClass('selected');
    $(this).addClass('selected');
}).hover(function () {
    this.src = this.src.replace("_off","_on");
  }, 
  function () {
if(!$(this).hasClass('selected')){
    this.src = this.src.replace("_on","_off");
}
});

当然，您可以使用 _on 图像来设置 .selected 图像的样式。

旁注:请注意，实现翻转图像的推荐方法是 css sprite 技术:使用包含所有状态的图像，使用该图像作为背景图像，并根据 :hover、:active 状态调整背景位置。这是一个纯 CSS 解决方案，适用于所有最新的浏览器。