包含某些類字符串的jQuery顯示元素

Question

嘿，我正在開發一個使用PDO和MySQL數據庫列出車輛數據的站點。

這裏是什麼，我現在有一個例子：http://www.drivencarsales.co.uk/

所以基本上在MySQL表的每一行包含所有數據的每輛車，我使用下面的代碼打印它們放入一個列表：

<?php include('db-affinity/filter.php'); ?> 
     <div class="col-md-8 col-sm-8 col-lg-8"> 
     <?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> 
      '; 
     } ?> 
     </div> 
     </div> 
     </div> 

<script>$(「.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> 

正如你所看到的，我正在使用while循環來顯示每一行，我還將車輛的'Make'添加到列表容器類，但也有一些jQuery，但我會解釋它是什麼馬上使用。

我再有這樣的形式：

<div class="container con-col-listing"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-4"> 
     <form class="car-finder-container dflt-container"> 
     <h2 class="h2-finder">Car finder</h2> 
     <ul class="toggle-view"> 
      <li class="li-toggle"> 
      <h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4> 
      <div class="panel"> 
      <select class="form-control select-box" name=""> 
       <option value="make-any">Make (Any)</option> 
       <?php while($make = $filterres->fetch(PDO::FETCH_ASSOC)) 
       { 
       echo ' 
       <option value="">'.$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> 
      </div> 
      </li> 
      <li class="li-toggle"> 
      <h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4> 
      <div class="panel"> 
      <input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="four-by-four-checkbox" class="label-checkbox">4x4</label> 
      <input id="convertible-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="convertible-checkbox" class="label-checkbox">Convertible</label> 
      <input id="coupe-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="coupe-checkbox" class="label-checkbox">Coupe</label> 
      </div> 
      </li> 
      <li class="li-toggle"> 
      <h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4> 
      <div class="panel"> 
      <input id="automatic-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="automatic-checkbox" class="label-checkbox">Automatic</label> 
      <input id="manual-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="manual-checkbox" class="label-checkbox">Manual</label> 
      <input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/> 
      <label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label> 
      </div> 
      </li> 
     </ul> 
     <button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars 
     </button> 
     <h4 class="h4-finder"><a href="#">Try our Smart Search </a><span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4> 
     </form> 
     </div> 

你只需要採取通知的形式開始，你可以看到「製作的」車輛都顯示在使用選擇元素選項while循環。

現在回到了jQuery：

<script>$(「.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來顯示顯示在選擇元素的選項中選擇相同的「製作」的課程，並隱藏不包含類該列表容器div中的那個類。

由於某些原因，當選擇該選項時，jQuery沒有顯示與選定選項具有相同'Make'的類。

任何想法我錯了？

順便說一句我知道我應該使用AJAX，但我不知道從哪裏開始。

Answer 1

您需要在您的品牌.select-box的選項標籤中插入一個值。每個選項標籤都由<option value="">'.$make["Make"].'</option>給出。

因此$(this).val()將返回一個空字符串。試試像這樣：'<option value="'. $make["Make"].'">'.$make["Make"].'</option>。

Answer 2

請如下所示的變化：

選項

  <option>'.$make["Make"].'</option> 

jQuery的

//Wait for DOM to load 
$(document).ready(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(); 
    }); 
}); 

UPDATE

審覈您的頁面，您需要在當前位置的唯一代碼後，嚴格按照顯示是：

$(".select-box").first().change(function() { 
    var make = $(this).val(); 
    if(make != 'make-any') { 
     $('.' + make).show().next('.listing-container-spec').show(); 
     $(".listing-container").not("." + make).hide() 
     .next('.listing-container-spec').hide(); 
    } 
}).change();