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>
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
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. –
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