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