jquery - 使用 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;
});