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

Question

我在使用jQuery和图像时遇到了一些问题。

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

我遇到的问题是当我点击时，源代码发生变化，但是当我将鼠标悬停时，它会变回“关闭”图像！这样一个简单的问题，但我找不到解决方案。

悬停代码：

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

功能getImageSourceOn /关只返回基于与新源的参数的字符串。

的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（）而不是这个子字符串方法，但我无法得到它的工作。

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