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

それから私は、背景画像のCSSプロパティを使用することをお勧めし、src属性を変更するためだけの背景 - 画像位置を変更しますあなたのhoverコード

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