使用jQuery单击时保持图像悬停按钮

Question

当我将鼠标悬停在按钮图像上时,我有以下代码来提供悬停效果:

 $("img.hoverImage")
    .mouseover(function () {
        var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
        $(this).attr("src", src);
    })
    .mouseout(function () {
        var src = $(this).attr("src").replace("_hover", "");
        $(this).attr("src", src);
    });

这非常有效.我现在有一个额外的要求:

我连续三个按钮都有class ="hoverImage".

<a class="imageLink" href=""><img class="hoverImage" src="/Content/Images/1.png"/></a>
<a class="imageLink" href=""><img class="hoverImage" src="/Content/Images/2.png"/></a>
<a class="imageLink" href=""><img class="hoverImage" src="/Content/Images/3.png"/></a>

我仍然希望保持这种悬停效果,但现在我也想改变它,所以当我点击图像时,它会保持显示悬停图像(即使我将鼠标移出该图像).当我点击另一个按钮时,它应该从其他按钮中移除悬停.

注意:单击图像链接不会重定向到新页面(它们只是从js文件中调用一些ajax)

使用jQuery扩展以下代码以支持此功能的最佳方法是什么？看来我需要在单击项目后禁用mouseout处理程序,但我试图避免使用复杂的解决方案.

Answer 1

您可以使用class/data/attr之一跟踪点击图像的活动状态,这样的事情就可以完成工作.

$("img.hoverImage").mouseover(function(){
  if ($(this).is('.activeImage')) return;
  var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
  $(this).attr("src", src);
}).mouseout(function(){
  if ($(this).is('.activeImage')) return; // Skip mouseout for active image
  var src = $(this).attr("src").replace("_hover", "");
  $(this).attr("src", src);
}).click(function(){
  // remove previous active state
  $('.activeImage').not(this).removeClass('activeImage').trigger('mouseout');
  // set new active state
  $(this).addClass('activeImage');
  return false;
});