Я отработал около 90% этого, но, кажется, не могу получить последние 10%:
У меня есть форма, которая просит пользователя выбрать местоположение. При выборе я хочу, чтобы страница (и форма запроса) исчезли в непрозрачности, и новый div, чтобы исчезнуть сверху с информацией о ценах.
В настоящий момент все работает, как и ожидалось, для первой выбранной опции (novato), но для любой другой опции в списке делители страницы и запроса исчезают, а новый ценовой блок не отображается.
Я в тупике и почти уверен, что мне просто не хватает чего-то глупого (будучи новичком). Любая помощь приветствуется!
форма запроса:
<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>
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");
}
});
});
Дивы:
<div id="pricing_novato">content</div>
<div id="pricing_sanleandro">content</div>
<div id="pricing_livermore">content</div>
<div id="pricing_sanjose">content</div>