如何有效地隱藏其他同胞使用jquery

我有一個下拉列表和5 div與它一起。我需要一次顯示一個特定的div和隱藏其他。這是我的方法這是我的代碼如何有效地隱藏其他同胞使用jquery

<div data-role="content"> 
    <div id="tab-1"> 
     <br /> 
     <div id="one" style="width: device-width; height: 150px;"></div> 
     <div id="two" style="width: device-width; height: 150px;"></div> 
     <div id="three" style="width: device-width; height: 150px;"></div> 
     <div id="four" style="width: device-width; height: 150px;"></div> 
     <div id="five" style="width: device-width; height: 150px;"></div> 
     <div class="ui-select"> 
      <select name="usageDropDownList" id="usageDropDownList" 
       data-native-menu="false" tabindex="-1"> 
       <option value="one">1</option> 
       <option value="two">2</option> 
       <option value="three">3</option> 
       <option value="four">4</option> 
       <option value="five">5</option> 
      </select> 
</div</div>

這裏是我的document.ready（）

$(document).ready(function() { 
    $("#usageDropDownList").change(function() { 
     if ($(this).val() == 'one') {    
      $("#two").hide(); 
      $("#three").hide(); 
      $("#four").hide(); 
      $("#five").hide();    
      $("#one").show(); 
     } else if ($(this).val() == 'two') { 
      $("#one").hide(); 
      $("#three").hide(); 
      $("#four").hide(); 
      $("#five").hide();    
      $("#two").show(); 
     } else if ($(this).val() == 'three') { 
      $("#one").hide(); 
      $("#two").hide(); 
      $("#four").hide(); 
      $("#five").hide();    
      $("#three").show(); 
     } else if ($(this).val() == 'four') { 
      $("#one").hide(); 
      $("#two").hide(); 
      $("#three").hide(); 
      $("#five").hide();    
      $("#four").show(); 
     } else if ($(this).val() == 'five') { 
      $("#one").hide(); 
      $("#two").hide(); 
      $("#three").hide(); 
      $("#four").hide();    
      $("#five").show(); 
     } 
    }); 
});

任何一個可以建議我一個更好的辦法？

來源

2012-03-14 Coder_sLaY

這就是你需要：

$("#" + $(this).val()).show().siblings().hide();

細目：

$("#" + $(this).val()) // selects div with id equal to value of selected option 
.show()     // shows it 
.siblings()    // then selects all of the other divs next to it 
.hide()     // and hides them

更新：

由於還有旁邊的「數字」的div的<div class="ui-select">您標記，這也將被隱藏（這是不可取的）。你可以在許多方面解決這個問題，這裏有兩個：

1：使該分區不是一個兄弟只需將包裝DIV圍繞「數字」：

<div> <!-- added this --> 
    <div id="one" style="width: device-width; height: 150px;"></div> 
    <div id="two" style="width: device-width; height: 150px;"></div> 
    <div id="three" style="width: device-width; height: 150px;"></div> 
    <div id="four" style="width: device-width; height: 150px;"></div> 
    <div id="five" style="width: device-width; height: 150px;"></div> 
</div>

2：排除ui-select DIV具體做法是：

$("#" + $(this).val()).show().siblings().not(".ui-select").hide();

來源

2012-03-14 09:02:16 Jon

@喬恩嗨，如果我寫你的代碼，然後我的下拉列表一也隱藏。我不想那樣。我想要排除下拉列表。 :) – 2012-03-14 09:07:50

是的，使用的兄弟姐妹（）選擇不只是你要隱藏的div更多。 – jchavannes 2012-03-14 09:09:30

@Coder_sLaY：對不起。看看更新。 – Jon 2012-03-14 09:12:53

嘛，就像清理你的代碼的問題：

$('#one, #two, #three, #four, #five').hide(); 
$('#'+$(this).val()).show();

編輯：試試這個，然後：

$('#tab-1 div').each(function() { 
    if($(this).attr('id').length != -1) { 
     $(this).hide(); 
    } 
}); 
$('#'+$(this).val()).show();

來源

2012-03-14 09:02:45 jchavannes

是否有一個原因，這不適合你？ – jchavannes 2012-03-14 09:12:19

不，這也不錯。但我想要更少的硬編碼值。更高效...雖然你的答案是更好的，那麼我的做法，所以+1 :) – 2012-03-14 09:17:23

好吧更新。 – jchavannes 2012-03-14 09:23:04

您可以簡化您的代碼添加一個div

<div data-role="content"> 
    <div id="tab-1"> 
     <br /> 
     <div id="selection">  
      <div id="one" style="width: device-width; height: 50px;">A</div> 
      <div id="two" style="display:none; width: device-width; height:50px;">B</div> 
      <div id="three" style="display:none; width: device-width; height: 50px;">C</div> 
      <div id="four" style="display:none; width: device-width; height: 50px;">D</div> 
      <div id="five" style="display:none; width: device-width; height: 50px;">E</div> 
     </div> 
     <div class="ui-select"> 
      <select name="usageDropDownList" id="usageDropDownList"> 
       <option value="one">1</option> 
       <option value="two">2</option> 
       <option value="three">3</option> 
       <option value="four">4</option> 
       <option value="five">5</option> 
      </select> 
     </div> 
    </div> 
</div>

那麼你的代碼將

$(document).ready(function() { 
    $("#usageDropDownList").change(function() { 
     var selected = $(this).val(); 
     $("#selection > div:visible").hide(); 
     $("#"+selected).show(); 
    }); 
});

你可以在這裏嘗試這樣的代碼： http://jsfiddle.net/cRbUS/8/

來源

2012-03-14 09:23:03

如何有效地隱藏其他同胞使用jquery

回答

相關問題