包含某些类字符串的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();