顯示/隱藏的div提交

Question

我曾出這90％左右，但似乎無法得到最後的10％：

我有要求用戶選擇一個位置的形式。在選擇時，我希望頁面（和請求表單）淡入淡出，而新的div將隨定價信息一起褪色。

現在，一切按第一個選定選項（novato）的預期工作，但在列表中的任何其他選項中，頁面和請求表單div都淡出，並且新的定價div不可見。

我很難過，而且很確定我只是錯過了一些愚蠢的東西（作爲一個新手）。任何幫助表示讚賞！

申請表：

<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：

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

Answer 1

的想法值：http://jsfiddle.net/Efb32/6/。

我改變了一些東西，看看代碼：增加了一些風格，改變了css(...)變化，從而它適合，加return false提交表單代碼，以便它在的jsfiddle並添加#page和#pricing_selector的div是用於代碼中。它看起來對於所有4個選項都是一樣的。

我想我給出的輸出我不明白是什麼問題 - 你可以檢查jsfiddle上的代碼是否按照您的預期邏輯運行？

Answer 2

你試過分配當前選定的選項給一個變量，然後測試而不是？

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

而且，如果#page是你的容器，就不會這樣：容器內包含

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

淡出一切嗎？我只是假設，因爲我在你的代碼中看不到它。

你也可以嘗試把一些控制檯記錄或乾脆提醒您正試圖測試給你，我剛剛創建了一個用的jsfiddle代碼發生的事情在你的代碼