Question

我试图隐藏并显示我的页面上显示的div，其中包含一个选择元素，但有点麻烦，因为我似乎无法使jQuery正常运行。

我正在使用PHP列出我的SQL表的结果，该表当前将每行显示在我的页面上并将它们打印到列表中。

我想让jQuery隐藏不具备与所选select选项匹配的类的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>
          ';
      } ?>

＆＃39; Make＆＃39;被添加到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>

正如您所看到的，选择选项包含＆＃39;制作＆＃39;并且是循环的。

所以归结为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();
    });
});

修改在函数

之前还需要$

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 miss value属性（但在实例中一切正常）：

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

jQuery显示和隐藏动态类不起作用

2 个答案: