jQuery在悬停时更改图像，然后在单击时保持图像

Question

我对 jQuery 和图像有点问题。

我正在尝试创建一个简单的系统，其中图像在悬停时发生变化（我已经成功地使用 jQuery .hover()）但是我现在正在尝试设置它，所以如果用户点击图像，源永久更改为悬停图像。

我遇到的问题是，当我单击时，源会发生变化，但是当我将鼠标悬停在其上时，它会变回“关闭”图像！这么简单的问题，却找不到解决办法。

悬停代码：

$("#image").hover(function () {
            $(this).attr("src", getImageSourceOn("image"));
        }, function () {
            $(this).attr("src", getImageSourceOff("image"));
});

getImageSourceOn / Off 函数只是根据带有新源的参数返回一个字符串。

onClick 代码：

var imageSource = $(imageID).attr("src");
  var onOff = imageSource.substring((imageSource.length - 5), (imageSource.length - 4));
  if (onOff == "F")
  {
    //alert("Off\nstrID = " + strID);
    $(imageID).attr("src", getImageSourceOn(strID));
  }
  else
  {
    //alert("On");
    $(imageID).attr("src", getImageSourceOff(strID));
  }

此代码仅获取源并在源中查找 On / Off 以将相反的内容放置为图像。我尝试使用 .toggle() 而不是这个子字符串方法，但我无法让它工作。

Answer 1

声明一个全局变量。在click事件上附加一个函数：

var clicked = false;

$("#image").click(function(){
  if(!clicked)
    clicked = true;
  else
    $(this).attr("src", getImageSourceOff("image"));
});

然后修改你hover代码

  $("#image").hover(function () {
      $(this).attr("src", getImageSourceOn("image"));
  }, function () {
     if(!clicked)
       $(this).attr("src", getImageSourceOff("image"));
  });