jquery avec l'état off et click en utilisant les images

Question

Salut J'essaie de faire un survol à trois états en utilisant jquery. Je veux un état inactif et un état de clic.

Je dois répliquer un style d'interface spécifique et ne pas utiliser d'images en option. Voici le code que j'ai utilisé. Cependant, je n'arrive pas à comprendre comment désactiver une image quand on en clique une autre.

Voici un scenerio.

1) L'utilisateur survole l'image qui active l'image sur état. 2) L'utilisateur quitte cette image et passe à une autre image. L'image active précédente est désactivée et l'image actuellement survolée est activée. 3) L'utilisateur clique sur une image qui active l'image de l'état cliqué. Toutefois, lorsque l'utilisateur clique sur une autre image précédemment cliquée, l'image revient à l'état bloqué.

Je suis capable de faire ceci avec Javascript cependant, je suis nouveau à Jquery et avoir du mal à essayer de comprendre cela.

Voici le code:

$(document).ready(function() { 
    // Navigation rollovers 
    $("#nav a").mouseover(function(){ 
     imgsrc = $(this).children("img").attr("src"); 
     matches = imgsrc.match(/_on/); 
     // don't do the rollover if state is already ON 
     if (!matches) { 
      imgsrcON = imgsrc.replace(/.gif$/ig,"_on.gif"); 
      // strip off extension 
      $(this).children("img").attr("src", imgsrcON); 
     } 
    }); 
    $("#nav a").mouseout(function(){ 
     $(this).children("img").attr("src", imgsrc); 
    }); 
    // Navigation clicks 
    $("#nav a").click(function(){ 
     imgsrc = $(this).children("img").attr("src"); 
     clkmatches = imgsrc.match(/_on/); 
     // don't do the rollover if state is already ON 
     if (!clkmatches) { 
      imgsrcCLK = imgsrc.replace(/.gif$/ig,"_clk.gif"); 
      // strip off extension 
      $(this).attr("src", imgsrcCLK); 
     } 
    });  
}); 

Answer 1

Pour clarifier les choses, si une image a été cliqué, vous voulez rester dans l'état cliqué, même si une autre image est cliqué?

Si c'est le cas, je voudrais ajouter une classe lorsque l'image est cliquée, puis dans votre chèque pour supprimer l'état, faire une vérification pour voir si cette classe est sur l'image.

ex.

$('item').click(function(){$(this).addClass('clicked');} 
$('other_item').click(function(){ 
    $('all_items') -- if class != 'clicked' 
     { go ahead and revert it to a normal state, otherwise don't touch it} 

J'espère que mon code pseudo est logique.

Answer 2

Cette pièce de code devrait accomplir ce que vous cherchez. Bien que je n'ai pas testé son exactitude (puisque je devrais travailler actuellement!), Il devrait au moins illustrer une façon de faire cela.

var clicked_obj; 
$("#nav a").mouseover(function() { 
    if ($(this).data("clicked")) { return; } 
    $(this).children("img").each(function() { 
     this.src = "<path to mouseover image>"; 
    }); 
}).mouseout(function() { 
    if ($(this).data("clicked")) { return; } 
    $(this).children("img").each(function() { 
     this.src = "<path to original image>"; 
    }); 
}).click(function() { 
    if (clicked_obj) { 
     $(clicked_obj).removeData("clicked").mouseout(); 
    } 
    clicked_obj = this; 
    $(this).data("clicked", true); 
    $(this).children("img").each(function() { 
     this.src = "<path to clicked image>"; 
    }); 
});