jQuery Modification d'une image sur le vol stationnaire, puis maintien de l'image sur le clic

Question

Je rencontre un petit problème avec jQuery et une image. J'essaye de créer un système simple où une image change sur le vol stationnaire (que j'ai fait fonctionner avec jQuery .hover()) cependant j'essaye maintenant de le configurer ainsi si l'utilisateur clique dessus l'image, la source est changée en permanence pour l'image stationnaire.

Le problème que j'ai est quand je clique, la source change, mais quand je passe la souris, elle revient à l'image "off"! Un problème si simple mais je ne trouve pas de solution.

Le code de vol stationnaire:

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

Les fonctions getImageSourceOn/Off revenir simplement une chaîne en fonction du paramètre avec la nouvelle source.

Le code 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)); 
    } 

Ce code prend juste la source et recherche On/Off dans la source pour mettre à l'opposé de l'image. J'ai essayé d'utiliser .toggle() au lieu de cette méthode de sous-chaîne mais je ne pouvais pas le faire fonctionner.

Answer 1

Déclarez une variable globale. Joindre une fonction sur l'événement click:

var clicked = false; 

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

modifier Ensuite, vous hover Code

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