Javascript jQuery在悬停时更改图像，然后在单击时维护图像

我对jQuery和图像有点问题

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

我遇到的问题是，当我单击时，源代码会更改，但当我将鼠标悬停在off位置时，源代码会更改回“off”图像！这么简单的问题，但我找不到解决办法

悬停代码：

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

---

这段代码只是获取源代码，并在源代码中查找开/关，将相反的设置作为图像。我尝试使用.toggle（）代替此子字符串方法，但无法使其工作。

声明一个全局变量。在

单击事件上附加功能：

var clicked = false;

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

然后修改您的
hover
code

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

非常感谢罗兰多。使用此系统，单击时图像保持不变。不过，我希望再次单击时图像会返回。谢谢罗兰多。我如何调整代码使其可重复使用？目前，它只需点击一次就可以打开和关闭，但不能再点击了。排序后，我添加了'clicked=false；'单击图像函数else语句。如果要支持多个图像，可能只需向单击的图像添加一个类。类似于：
$（this）.addClass（“clicked”）
代替
clicked=true
，然后使用
if（！$（this）.hasClass（“clicked”）
代替
if（！clicked）
我建议使用Background Image css属性，只需更改背景图像的位置，因为只有在下载图像后，才会显示src属性，因此首次悬停时不会显示更改。