2010-06-07 2 views
1

J'ai une situation où je ne comprends pas Toggle de jQuery.jQuery Commutateur bascule images

J'ai deux boutons, les deux ouvrent le même contenu et lorsque vous cliquez sur un bouton, le contenu devrait s'ouvrir ou se fermer et l'attribut change le bouton de ouvert à fermé. (Donc les deux boutons font la même fonction). La seule chose est, quand je clique sur le bouton du haut et ouvre mon contenu, puis cliquez sur le bouton inférieur pour le fermer, les attributs de l'image sont commutés de façon incorrecte.

Voici une version très dépouillée de ce que mon code ressemble et j'apprécierais de l'aide.

<script language="javascript" type="text/javascript"> 
    $(function() { 

     var open = false; 

     $("#button1, #button2").toggle(
      function() { 
       open = true; 
       $("#button1").attr("src", "images/btn-open.gif"); 
       $("#button2").attr("src", "images/btn-open.gif"); 
      }, 
      function() { 
       if (open) { 
        $("#button1").attr("src", "images/btn-closed.gif"); 
        $("#button2").attr("src", "images/btn-closed.gif"); 

       } else { 
        $("#button1").attr("src", "images/btn-open.gif"); 
        $("#button2").attr("src", "images/btn-open.gif"); 

       } 
       open = false; 

      } 
     ); 


    }); 
</script> 

<img id="button1" src="images/btn-open.gif"></img> 
<br /> 
<br /> 
<br /> 
<br /> 
<img id="button2" src="images/btn-open.gif"></img> 

Répondre

3

.toggle() pédalez entre le n (généralement 2, mais il ne se limite pas à 2) a fourni des fonctions sur chaque clic par élément, mais vous voulez une bascule pour les deux boutons, pas chacun basculer indepdently , donc faire une vérification et utiliser .click(), quelque chose comme ceci:

var open = false; 
$("#button1, #button2").click(function() { 
    open = !open; //toggle it 
    $("#button1, #button2") //set the src based on the new state 
    .attr("src", "images/btn-" + (open ? "open" : "closed") + ".gif"); 
}); 

J'ai aussi combined your selectors de faire un peu plus propre, il est le même effet que :) Je ne suis pas sûr à 100% de vos noms images afin que vous peut avoir besoin pour changer le booléen, mais vous avez l'idée.

+0

Merci Nick, laissez-moi essayer ceci et voir comment ça se passe;) –

+0

C'est la merde! Merci Nick! –