多次顯示/隱藏jquery

Question

我的下面的代碼顯示了當從下拉菜單中選擇匹配的國家時正確的城市/州div，但是如果用戶決定選擇另一個州，它不會隱藏前一個。我是否必須爲每個想要隱藏的div創建一個if/else？

<script type="text/javascript"> 
$(document).ready(function() { 
... 
//city & state display 

    $("#ctry").change(function() { 
     $(".state").hide(); 

     var stateSelect = $("#state_" + $(this).val()); 

     if (stateSelect.length === 0) 
     $("#state_label").hide(); 
     else { 
     $("#state_label").show(); 
     stateSelect.show(); 
     }  
    });  
}); 
</script> 

的html代碼：

<label>Country/Locale:</label> 
     <select id="ctry" name="country"> 
     <option value="">-- Select</option> 
     <option value="US">United States</option> 
     <option value="CA">Canada</option> 
     <option value="GB">United Kingdom</option>   
     <option value="AU">Australia</option>  
     </select><br /> 

<!-- US -->   
    <div id="state_US" style="display:none"> 
    <label id="state_label" style="display:none">State:</label> 
    <span class="rstate"> 
     <select name="u_state"> 
     <option value="">-- State US</option> 
     <option value="AL">Alabama</option> 
     </select> 
    </span> 
    &nbsp;&nbsp;Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" /> 
    </div> 

<!-- CA --> 
    <div id="state_CA" style="display:none"> 
    <label id="state_label" style="display:none">Province:</label> 
    <span class="rstate"> 
     <select name="c_state"> 
     <option value="">-- Prov CA</option> 
     <option value="ON">Windsor</option> 
     </select> 
    </span> 
    &nbsp;&nbsp;Postal or Place:<input style="margin-left:43px;" type="text" name="locca" id="locca" size="30" /> 
    </div> 

<!-- GB --> 
    <div id="state_GB" style="display:none"> 
     <label id="state_label" style="display:none">City or Region:</label> 
     <span class="rstate"> 
      <select name="k_state"> 
      <option value="">-- Place</option> 
      <option value="AU">UK!</option> 
      </select> 
     </span> 
    </div> 

<!-- AU --> 
    <div id="state_AU" style="display:none"> 
     <label id="state_label" style="display:none">City or Region:</label> 
     <span class="rstate"> 
      <select name="a_state"> 
      <option value="">-- Place</option> 
      <option value="AU">UK!</option> 
      </select> 
     </span> 
    </div> 

Answer 1

取出state_label IDS ..
未使用的類state添加到state_CA，state_US等元素..

因此，每個國家組應

<div id="state_US" class="state" style="display:none"> 
<label style="display:none">State:</label> 
<span class="rstate"> 
    <select name="u_state"> 
    <option value="">-- State US</option> 
    <option value="AL">Alabama</option> 
    </select> 
</span> 
&nbsp;&nbsp;Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" /> 
</div> 

，改變你的腳本是

<script type="text/javascript"> 
$(document).ready(function() { 
... 
//city & state display 

    $("#ctry").change(function() { 
     $(".state").hide(); 

     var stateSelect = $("#state_" + $(this).val()); 
     stateSelect.show();  
    });  
}); 
</script> 

Demo在​​

Answer 2

1. 你不能有相同ID的多個元素。您的標籤state_Label不是唯一的。你應該改變這個，否則一些瀏覽器不會顯示你的標籤。
2. 隱藏所有具有css級「狀態」的元素。但是這個階級沒有元素。我想你需要將class="state"加到你所有的state_* -divs。

Answer 3

事情是這樣的邏輯可能會爲你工作：

var previous; 
$(document).ready(function() {  
    $("#ctry").change(function() { 
     $(".state").hide(); 

     var stateSelect = $("#state_" + $(this).val()); 

     if (stateSelect.length === 0) { 
      $("#state_label").hide(); 
     } else { 
      if (previous) { 
       previous.hide(function() { 
        $("#state_label").show(); 
        stateSelect.show(); 
        previous = stateSelect; 
       }); 
      } else { 
       $("#state_label").show(); 
       stateSelect.show(); 
       previous = stateSelect; 
      } 
     }  
    });  
}); 

雖然它會更容易，如果他們都具有相同的CSS類，與你可以很容易隱藏和然後顯示一個那是被選中的。