包含某些类字符串的 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 循环来显示每一行不久。

然后我有这个表格：

<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 以显示在 select 元素的选项中选择的显示相同“Make”的类，并在列表容器 div 中隐藏不包含该类的类。

由于某种原因选择选项时，jQuery不会显示与所选选项具有相同“make”的类。

知道我哪里出错了吗？

顺便说一句，我知道我应该为此使用 AJAX，但是我不知道从哪里开始。

Answer 1

您需要在 Make .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();
    });
});

更新

查看您的页面后，您在当前位置需要的唯一代码，完全如图所示，是：

$(".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();