如何有效地隐藏其他同胞使用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

回答

相关问题