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

Question

我对 jQuery 和图像有点问题。

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

我遇到的问题是，当我点击时，来源发生了变化，但是当我悬停时，它又变回“关闭”图像!这么简单的问题，但我找不到解决方案。

悬停代码:

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

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

点击代码:

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"));
  });