2010-11-14 24 views
0

Je travaille sur environ 90% de cela, mais ne peut pas sembler obtenir les 10%:Afficher/Masquer les divs sur le formulaire soumettre

J'ai un formulaire qui demande à l'utilisateur de sélectionner un emplacement. Sur select, je veux que la page (et le formulaire de requête) pâlissent en opacité, et qu'un nouveau div apparaisse au dessus avec les informations de prix. À l'heure actuelle, tout fonctionne comme prévu pour la première option sélectionnée (novato), mais sur toute autre option de la liste, les divs de page et de formulaire de demande disparaissent et la nouvelle div de tarification n'est pas visible.

Je suis perplexe, et assez sûr que je manque juste quelque chose de stupide (étant un débutant). Toute aide est appréciée!

le formulaire de demande:

<form id="locations"> 
<select> 
<option>Choose a location</option> 
<option></option> 
<option id="novato" value="novato">Novato</option> 
<option id="sanleandro" value="sanleandro">San Leandro</option> 
<option id="livermore" value="livermore">Livermore</option> 
<option id="sanjose" value="sanjose">San Jose</option> 
</select> 
<input type="submit" id="submit" value="go"/> 
</form> 

La JS:

> $(function() { 
> $("#locations").submit(function() { 
>  if ($("#novato").attr("selected")) { 
>   $("#pricing_novato").fadeIn("normal"); 
>   $("#page").fadeTo("normal", 0.1); 
>   $("#pricing_novato").css({top:"0",left:"50%",margin:"20px 
> 0 0 -"+($("#pricing_novato").width()/
> 2)+"px"}); 
>   $("#pricing_selector").fadeOut("normal");  
      }else if($("#sanleandro").attr("selected")) { 
>   $("#pricing_sanleandro").fadeIn("normal"); 
>   $("#page").fadeTo("normal", 0.1); 
>   $("#pricing_sanleandro").css({top:"0",left:"50%",margin:"20px 
> 0 0 
> -"+($("#pricing_sanleandro").width()/2)+"px"}); 
>   $("#pricing_selector").fadeOut("normal");  
      }else if($("#livermore").attr("selected")) { 
>   $("#pricing_livermore").fadeIn("normal");   $("#page").fadeTo("normal", 0.1); 
>   $("#pricing_livermore").css({top:"0",left:"50%",margin:"20px 
> 0 0 
> -"+($("#pricing_livermore").width()/2)+"px"}); 
>   $("#pricing_selector").fadeOut("normal");  
      }else if($("#sanjose").attr("selected")) { 
>   $("#pricing_sanjose").fadeIn("normal"); 
>   $("#page").fadeTo("normal", 0.1); 
>   $("#pricing_sanjose").css({top:"0",left:"50%",margin:"20px 
> 0 0 -"+($("#pricing_sanjose").width() 
>/2)+"px"}); 
>   $("#pricing_selector").fadeOut("normal");  
      } 
    }); 
}); 

Les divs:

<div id="pricing_novato">content</div> 
<div id="pricing_sanleandro">content</div> 
<div id="pricing_livermore">content</div> 
<div id="pricing_sanjose">content</div> 

Répondre

0

Je viens de créer un jsFiddle avec votre code: http://jsfiddle.net/Efb32/6/.

j'ai changé quelques petites choses, jetez un oeil au code: ajouté certains styles, changé les css(...) changements il convient, a ajouté return false à la forme soumettre le code afin qu'il fonctionne dans jsFiddle et a ajouté le #page et #pricing_selector divs qui sont utilisé dans le code. Il semble se comporter de la même manière pour les 4 options.

Je suppose que j'ai donné la sortie je ne vois pas quel est le problème - pouvez-vous vérifier si le code sur jsfiddle se comporte logiquement comme vous vous attendez ou non?

+0

wow! C'est étrange. Je vois ce que vous avez fait, et je ne peux toujours pas dire pourquoi la mienne se brise. Voici le lien en direct: http://76.103.255.69/earthcare/Products_residential/index2.aspx – Jenn

+0

Je suppose que cela a à voir avec le style. Essayez d'utiliser la même ligne 'css (...)' et ajoutez le style 'position: relative' - expérimentez avec cela pour voir si c'est le problème. –

+0

Je dois avoir eu un problème soit dans la feuille de style ou dans mon fichier d'inclusion, mais votre solution a fonctionné! Merci beaucoup! – Jenn

0

Avez-vous essayé attribuer l'option sélectionnée à une variable et test à la place?

var selectedLocation = $("select option:selected").val(); 

De plus, si #page est votre conteneur, ne faisant pas:

$("#page").fadeTo("normal", 0.1); 

Fade tout ce contenu dans le conteneur? J'ai seulement supposé parce que je ne peux pas le voir dans votre code.

Vous pouvez également essayer de mettre une journalisation de la console ou alerter simplement les valeurs que vous essayez de tester pour vous donner une idée de ce qui se passe dans votre code

+0

Merci beaucoup pour la réponse! J'ai ajouté des alertes aux transitions pour confirmer que mes sélections étaient correctes, et cette partie a fonctionné. (Bonne idée!) Les divs de prix sont en fait dans un fichier include et sont placés en dehors de la div de la page (mais à l'intérieur du corps), de sorte que cette partie fonctionne aussi. – Jenn

+0

J'essaie de comprendre la var selectedLocation = $ ("select option: selected"). Val(); partie. Mon test ressemblerait-il à ceci?: If ($ ("# novato") = "selectedLocation") – Jenn

+0

Désolé ... débutant sérieux! – Jenn