jQuery顯示和隱藏動態類不工作

Question

我想隱藏和顯示我的頁面上顯示div與選擇元素，但有點麻煩，因爲我似乎無法讓jQuery的功能。

我從我的SQL表中使用PHP列出結果，當前在我的頁面上顯示每一行並將它們打印到列表中。

我想讓jQuery隱藏沒有匹配選定選項的類的div。

這裏是呼應的出所有的MySQL結果上市模板的一個實例，並將它們顯示成模板，然後環繞在表上顯示的每一行：

<?php while($row = $results->fetch(PDO::FETCH_ASSOC)) 
     { 
     echo ' 
     <div class="listing-container ' . $row["Make"] . '"> 
      <a href="carpage.php"><h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3></a> 
      <h3 class="price-listing">£'.number_format($row['Price']).'</h3> 
     </div> 
     <div class="listing-container-spec"> 
     <img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/> 
      <div class="ul-listing-container"> 
      <ul class="overwrite-btstrp-ul"> 
       <li class="diesel-svg list-svg">'.$row["FuelType"].'</li> 
       <li class="saloon-svg list-svg">'.$row["Bodytype"].'</li> 
       <li class="gear-svg list-svg">'.$row["Transmission"].'</li> 
       <li class="color-svg list-svg">'.$row["Colour"].'</li> 
      </ul> 
      </div> 
      <ul class="overwrite-btstrp-ul other-specs-ul h4-style"> 
      <li>Mileage: '.number_format($row["Mileage"]).'</li> 
      <li>Engine size: '.$row["EngineSize"].'cc</li> 
      </ul> 
      <button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked 
      </button> 
      <button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details 
      </button> 
      <button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive 
      </button> 
      <h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4> 
     </div> 
      '; 
     } ?> 

「製作」是添加到listing-container div以添加一個類，以便能夠使用jQuery過濾結果。

這裏是我使用select元素的形式：

<form> 
<select class="form-control select-box"> 
       <option value="make-any">Make (Any)</option> 
       <?php while($make = $filterres->fetch(PDO::FETCH_ASSOC)) 
       { 
       echo ' 
       <option>'.$make["Make"].'</option> 
       '; 
       } ?> 
      </select> 
      <select class="form-control last-select select-box"> 
       <option value="model-any">Model (Any)</option> 
       <option value="two">Two</option> 
       <option value="three">Three</option> 
       <option value="four">Four</option> 
       <option value="five">Five</option> 
      </select> 
</form> 

正如你可以看到選擇選項包含「製作」和循環播放。

如此下來了jQuery：

<script>//Wait for DOM to load 
(function() { 
    $(「.select-box」).change(function() { 

     // get the value of the select element 
     var make = $(this).val(); 


     //get all of the listing-container divs, remove the ones with the selected make class, then hide the rest 
     $(「.listing-container」).not(「.」 + make).hide(); 
    }); 
});</script> 

因此理論上這應該工作，但由於某種原因，它是不是，任何人可以發現任何可能是錯的？

我已將我的腳本放置在我的頁腳的核心jQuery下面，但它仍然無法工作。

這是一個活生生的例子：http://www.drivencarsales.co.uk/used-cars.php

Answer 1

看起來你正在使用該頁面的源代碼中的錯誤報價嘗試"

//Wait for DOM to load 
$(function() { 
    $(".select-box").change(function() { 

     // get the value of the select element 
     var make = $(this).val(); 


     //get all of the listing-container divs, remove the ones with the selected make class, then hide the rest 
     $(".listing-container").not("." + make).hide().next().hide(); 
    }); 
}); 

替換它們編輯 您還需要a $之前的功能

Answer 2

如果我理解正確↓ 工作代碼 ↓

$(function() { 
    $('.select-box').on("change",function() { 
     var make = this.value; 
     $('div.listing-container.'+make+",div.listing-container."+make+" + div.listing-container-spec").show(); 
     $('div.listing-container:not(.'+make+'),div.listing-container:not(.'+make+') + div.listing-container-spec').hide(); 
    }); 
}); 

而且短碼（但速度較慢）：

$(function() { 
    $('.select-box').on("change",function() { 
     var make = this.value; 
     $('.listing-container.'+make+",.listing-container."+make+" + div").show(); 
     $('.listing-container:not(.'+make+'),.listing-container:not(.'+make+') + div').hide(); 
    }); 
}); 

P.S.You小姐value屬性（但在活生生的例子就一切OK）：

echo '<option value="'.$make["Make"].'">'.$make["Make"].'</option>';