Jquery - 複数のdivが表示されません（）？

Question

申し訳ありませんが、最初に隠れている複数のdivの.show()を呼び出す際に問題がありました。アイブ氏は、私のロジックを経ていますが、これをやっている理由私は見つけることができません -

各ラボの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(); 
}); 

したがって、それらは隠れています。

//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を示している：いくつかのマッチング結果は（例えば、1つのオプションは、これらのラボのdivの3をトリガすることができる）、それらの全てを示すべき発見私は次のコールドロップダウン形式の変更は、場合複数のマッチがコンソールに印刷されているので、私はこれが分かります（ここでは2つのマッチ） -

しかし、私の問題は1つしか対応するdivではなく、最初のものが表示されます。他のすべては隠されたままです。私がform change funcでそれらのすべてを最初に隠していないと、複数のラボが表示され、問題は拡大されません。

私は正しいものでdisplayLabを呼び出す前に、私はすべてのラボのdivを非表示にしているので、それはすべてのdivを再表示しません、なぜ、私は知りません。なぜこうなった？どうすれば これを解決できますか？

Answer 1

あなたはいくつかの要素が最初そして隠された、これはアプリケーションの起動時にプログラム的にそれをしないベストですjQueryのようにインラインCSSを介してそれらを隠すことにより、イベントに応じてそれらを表示させたい場合。

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

を一度にページ内のすべての隠されたdivを表示するには：イベントがトリガされたとき

<div class="div1" style="display: none;"></div> 
<div class="div2" style="display: none;"></div> 
<div class="divN" style="display: none;"></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();