Показать / Скрыть элементы в форме отправки - PullRequest
0 голосов
/ 15 ноября 2010

Я отработал около 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>

Ответы [ 2 ]

0 голосов
/ 15 ноября 2010

Я только что создал jsfiddle с вашим кодом: http://jsfiddle.net/Efb32/6/.

Я изменил несколько вещей, взглянул на код: добавил несколько стилей, изменил css(...) изменения, чтобы он соответствовал, добавил return false к коду отправки формы, чтобы он работал в jsfiddle, и добавил #page и #pricing_selector div, которые используются в коде. Кажется, он ведет себя одинаково для всех 4 вариантов.

Полагаю, я дал вывод, я не вижу, в чем проблема - можете ли вы проверить, ведет ли код на jsfiddle логически, как вы ожидаете, или нет?

0 голосов
/ 15 ноября 2010

Вы пытались присвоить текущую выбранную опцию переменной, а затем проверить ее вместо этого?

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

Кроме того, если #page - ваш контейнер, вы не будете делать это:

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

Исчезать все содержимое контейнера? Я только предположил, потому что я не вижу его в вашем коде.

Вы также можете попробовать записать консоль или просто предупредить значения, которые вы пытаетесь проверить, чтобы дать вам представление о том, что происходит в вашем коде

...