更改下拉列表時不隱藏標題

Question

當我將角色工作從所有角色更改爲工程時，卡住了所有表不在工程類隱藏，但是當我選擇分析員角色時，表分析員中的標題不顯示，而是顯示工程標題始終顯示何時更改每個下拉菜單。

$("select.filterby").change(function() { 
 
    var filters = $.map($("select.filterby").toArray(), function(e) { 
 
\t return $(e).val(); 
 
    }).join("."); 
 
    var engineering = $("div#FilterContainer").find("h3, .third-title, .engineering, tr").hide(); 
 
    var analyst = $("div#FilterContainer").find("h3, .third-title, .analyst, tr").hide(); 
 

 
    if (analyst) { 
 
\t $("div#FilterContainer").find("h3.third-title.engineering, tr." + filters).show(); 
 
    } else if (engineering) { 
 
\t $("div#FilterContainer").find("h3.third-title.analyst, tr." + filters).show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <div id="FilterContainer" class="container"> 
 
    <h3 class="third-title all engineering">Engineering</h3> 
 
    <div class="row"> 
 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class=""> 
 
      <table class="table"> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="fe-dev.html">Front End Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology intern jakarta"> 
 
       <td style="width: 300px;"><a href="fe-in-dev.html">Front End Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Intern</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="wp-dev.html">Wordpress Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="ad-dev.html">Android Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="ios-dev.html">IOS Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="be-dev.html">Back End Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology intern jakarta"> 
 
       <td style="width: 300px;"><a href="be-in-dev.html">Back End Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Intern</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <h3 class="third-title all analyst">Analyst</h3> 
 
    <div class="row"> 
 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class=""> 
 
      <table class="table"> 
 
      <tr class="all analyst technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="sa.html">System Analyst</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all analyst technology intern jakarta"> 
 
       <td style="width: 300px;"><a href="sa-in.html">System Analyst</a></td> 
 
       <td>Technology</td> 
 
       <td>Intern</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

我不得不嘗試創建的if else if條件這是我聲明分析師和工程作爲參數，然後隱藏每個部分分析師和工程的稱號。

已更新。

<select class="form-control filterby"> 
    <option value="all">All roles</option> 
    <option value="accounting">Accounting</option> 
    <option value="administrative">Administrative</option> 
    <option value="analyst">Analyst</option> 
    <option value="engineering">Engineering</option> 
    <option value="product">Product</option> 
    <option value="marketing_sales">Marketing and Sales</option> 
</select> 

Answer 1

這裏是更新的代碼。試着檢查：

$("select.filterby").change(function() { 
 
    $("div#FilterContainer").find("h3,tr").hide(); 
 
    $("div#FilterContainer").find("h3." + $(this).val() + ",tr." + $(this).val()).show(); 
 
    
 
    $("#no-result-container").hide(); 
 
    if($("div#FilterContainer").find("h3." + $(this).val() + ",tr." + $(this).val()).length == 0) { 
 
    $("#no-result-container").show(); 
 
    } 
 
});

#no-result-container { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control filterby"> 
 
    <option value="all">All roles</option> 
 
    <option value="accounting">Accounting</option> 
 
    <option value="administrative">Administrative</option> 
 
    <option value="analyst">Analyst</option> 
 
    <option value="engineering">Engineering</option> 
 
    <option value="product">Product</option> 
 
    <option value="marketing_sales">Marketing and Sales</option> 
 
</select> 
 
<div id="FilterContainer" class="container"> 
 
    <div id="no-result-container" class="container"> No search parameter in here.</div> 
 
    <h3 class="third-title all engineering">Engineering</h3> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class=""> 
 
     <table class="table"> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="fe-dev.html">Front End Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology intern jakarta"> 
 
      <td style="width: 300px;"><a href="fe-in-dev.html">Front End Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Intern</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="wp-dev.html">Wordpress Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="ad-dev.html">Android Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="ios-dev.html">IOS Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="be-dev.html">Back End Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology intern jakarta"> 
 
      <td style="width: 300px;"><a href="be-in-dev.html">Back End Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Intern</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <h3 class="third-title all analyst">Analyst</h3> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class=""> 
 
     <table class="table"> 
 
      <tr class="all analyst technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="sa.html">System Analyst</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all analyst technology intern jakarta"> 
 
      <td style="width: 300px;"><a href="sa-in.html">System Analyst</a></td> 
 
      <td>Technology</td> 
 
      <td>Intern</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>