jquery - 多個div不會顯示（）？

Question

好吧，我有一個問題，呼籲.show()多個div是隱藏的開始。香港專業教育學院通過我的邏輯走了，但我找不到它爲什麼是這樣做的 -

每個實驗室DIV看起來是這樣，但使用不同類 -

<div class="lab1"> 
    <!--CTedit --> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-plus-square-o"></i><span style="margin-left: 12px; display: inline-block;"></span>Lab Focus: Cloud Management with vRealize Operations & <nobr>vRealize Automation</nobr></a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <span style="font-family:'proximanova-light', sans-serif;font-size:15px; line-height:19px; text-align:left; color: #565656;"> 
        <p>Deliver intelligent operations management across physical, virtual, and cloud infrastructures and accelerate the deployment and management of applications and compute services, improving business agility and operational efficiency.</p> 
        <p> 
         <ul> 
          <li>Build dashboards, views, and reports in vRealize Operations Manager</li> 
          <li>Discover OS and application management with vRealize Operations Manager</li> 
          <li>Learn how vRealize Log Insight delivers real-time log management, with machine learning-based Intelligent Grouping, high performance search and better troubleshooting across physical, virtual, and cloud environments</li> 
          <li>Walk through the deployment of a multi-tier infrastructure workload with integrations into several different existing technologies using vRealize Automation</li> 
          <li>Customize workloads with vRealize Automation as they progress through the provisioning or de-provisioning process</li> 
         </ul> 
        </p> 
       </span> 
      </div> 
     </div> 
     <br> 
     <p> 
      <a class="l1Link" style="color:#6db33f;" href="http://vmware-events.eventbrite.com" target="_blank"> 
       <span style="text-align:center"><strong>&raquo; Register now</strong></span> 
      </a> 
     </p> 
     <p class="descP1" style="font-size:12px;"><strong>DAY DATE <br>VENUE <br> CITY STATE</strong> </p> 
    </div> <!--CTedit --> 
</div> 

我有一系列8個的div，我躲最初這裏我告訴所有的人都在，如果選擇某個下拉選項調用的函數：

//setup 
$(".lab1").hide(); 
$(".lab2").hide(); 
$(".lab3").hide(); 
$(".lab4").hide(); 
$(".lab5").hide(); 
$(".lab6").hide(); 
$(".lab7").hide(); 
$(".lab8").hide(); 

function init() { 
    $(".lab1").show(); 
    $(".lab2").show(); 
    $(".lab3").show(); 
    $(".lab4").show(); 
    $(".lab5").show(); 
    $(".lab6").show(); 
    $(".lab7").show(); 
    $(".lab8").show(); 
}); 

於是他們開始了隱患。當下拉形式改變我打電話以下，指找到多個匹配的結果（例如，1點的選擇可以觸發這些實驗室的div 3）和應該顯示所有這些：

//dropdown change 
$(".form-control").change(function() { 
    $(".lab1").hide(); 
    $(".lab2").hide(); 
    $(".lab3").hide(); 
    $(".lab4").hide(); 
    $(".lab5").hide(); 
    $(".lab6").hide(); 
    $(".lab7").hide(); 
    $(".lab8").hide(); 

    console.log(this.value); 
    //find all matching events and get nums 
    if (this.value == "All labs") { 
     init(); 
    } 
    else { 
     for (var i = 0; i < arrayOfEvents.length; i++) { 
      if (arrayOfEvents[i][0] == this.value) { 
       var chosen = arrayOfEvents[i][3]; 
       var newLink = arrayOfEvents[i][8]; 
       console.log("match!", chosen); 

       var selectedLab = labArr[chosen - 1]; 
       displayLab(selectedLab, newLink); 
       updateTxt(selectedLab, i); 
      } 
     } 
    } 
}); 

displayLab示出了相應的實驗的div我知道這個工程，因爲多個匹配打印到控制檯（2匹配在這裏） -

但我的問題是隻有1對應的div，第一，顯示。所有其他人都保持隱藏。如果我沒有在窗體更改函數中調用它們的初始隱藏，則多個實驗室顯示/展開都沒有問題。

因爲我隱藏所有的實驗室divs之前，我呼籲displayLab在正確的，我不知道爲什麼它不會取消隱藏所有的divs。這是爲什麼發生？ 我如何解決這個問題？

Answer 1

如果您希望一些元素最初隱藏，然後根據jQuery事件顯示它們，所以通過內聯css隱藏它們，這是最好的，不要在應用程序啓動時以編程方式執行它。

<div class="div1" style="display: none;"></div> 
<div class="div2" style="display: none;"></div> 
<div class="divN" style="display: none;"></div> 

告訴他們，當事件觸發：

$('select').on('change', function() { 
    $('.div1, .div2, .divN').show(); 
}); 

要顯示頁面中所有隱藏的div一次：

// You can use this selector as a nested one 
// so all the hidden elements inside a 
// specific parent element will be selected. 
$('div:hidden').show(); 

嘗試此顯示的相同your-divs所有元素等級：

// This is not a recommended approach 
$('.your-divs').each(function() { 
    $(this).show(); 
}); 

個不同的類可以通過一組選擇中選擇：

$('.class1, class2, .classN').show();