使用jQuery顯示/隱藏<div>

Question

我有下面的代碼。 CSS將每個div標簽設置為display: none; ， 沒有其他的。 我希望選擇框僅顯示所選的div及其內容，但隱藏其余部分。 我覺得我只是缺少一些簡單的東西，但我無法弄清楚。 我正在使用jQuery 1.8.1。 提前致謝！

需要注意的是，出於我的目的，我編輯了此鏈接的代碼。 我對javascript並不滿意，這就是為什么這很糟糕的原因。

<script type="text/javascript">
$(document).ready(function(){
$("#choices").change(function(){

if ($(this).val() == "option1" ) {

    $("#option1").slideDown("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option2" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideDown("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option3" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideDown("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option4" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideDown("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option5" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideDown("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option6" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideDown("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option7" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideDown("fast");

} 

});
</script>
random body text
<form>
<select id="choices">
    <option value="none">Select one...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
</select>
</form>
    <div id="option1" class="hide">Opt 1 Text</div>
    <div id="option2" class="hide">Opt 2 Text</div>
    <div id="option3" class="hide">Opt 3 Text</div>
    <div id="option4" class="hide">Opt 4 Text</div>
    <div id="option5" class="hide">Opt 5 Text</div>
    <div id="option6" class="hide">Opt 6 Text</div>
    <div id="option7" class="hide">Opt 7 Text</div>

Answer 1

您正在使用類選擇器通過ID選擇元素，應使用#而不是. ，jQuery選擇器的工作方式類似於CSS選擇器。 您也可以縮小代碼。

$("#choices").change(function(){ 
   $('.hide').slideUp();
   $('#'+this.value).slideDown()
});

http://jsfiddle.net/X7AbR/

Answer 2

您的選擇器正在使用：

$('.optionX')

什么時候應該是：

$('#optionX')

這是因為“ optionX”是一個ID而不是一個類。 如果它是一個類，則'.optionX'將起作用。

Answer 3

哇...沒人聽說過DRY（“不要重復自己”）。 一個簡單的循環將殺死所有這些代碼：

$("#choices").change(function() {
  for( var i=1; i<=7; i++) {
      $("#option"+i)["slide"+($(this).val() == "option"+i ? "Down" : "Up")]("fast");
  }
});

另請注意，我已解決了您的問題： .choices在類名稱中具有choices任何元素。 #choices指具有該ID的元件choices 。

Answer 4

您使用了錯誤的CSS選擇器來獲取元素。

$(".choices").change(function(){

的. 選擇器通過類名選擇元素，並且您沒有“選擇”類的元素，這里您想要的是通過ID $("#choices") 。

這同樣適用於您的選項選擇，您可以使用進行分類選擇. 而您的ID應該用#選擇的元素

資源：

jQuery id選擇器

jQuery類選擇器

jQuery選擇器

Answer 5

您的選擇器是錯誤的。 您在html中使用id，但在jquery中使用類。 要解決它變化

$(".choices")到$("#choices")

$(".optionX")到$("#optionX")

小提琴示例： http : //jsfiddle.net/johnkoer/UDKrA/10/

Answer 6

動態構建選擇器並使用.siblings()方法：

$("#choices").change(function(){ // that's an ID, not a class
    var val = $(this).val();
    $('#'+val).slideDown('fast').siblings('.hide').slideUp('fast');
});

http://jsfiddle.net/mblase75/QkNX4/