使用jQuery和select元素隐藏动态类

Hiding dynamic classes with jQuery and a select element

本文关键字：隐藏 动态 元素 select jQuery 使用      更新时间：2023-09-26

嘿，伙计们，我正试图根据页面上的类来隐藏一个div，我还有一个带选项的select元素。

所以，为了让你知道我有一个模板，它列出了数据库结果，然后使用while循环来循环每一行，我的数据库中有一列包含每一行的所有"Make’s"。

以下是该代码的示例：

<?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"，它包括类中SQL行的make。

下面是我选择的元素的一个例子：

<select class="form-control select-box">
             <option value="make-any">Make (Any)</option>
             <?php while($make = $filterres->fetch(PDO::FETCH_ASSOC))
             {
             echo '
             <option value='.$make["Make"].'>'.$make["Make"].'</option>
             ';
             } ?>
</select>

所有"Make's"都是循环的，不显示重复项。

我现在使用这个jQuery来隐藏所有名为"AUDI"的类。

var myContainers = $("div[class^='listing-container ']").not(".listing-container.AUDI");
myContainers.hide();
myContainers.next(".listing-container-spec").hide();

我现在希望select元素确定显示什么"Make’s"，例如，如果用户选择宝马，我只希望列出具有宝马类的容器div。

有人能给我举一个例子，说明这是如何运作的，并向我解释一下吗？我仍然对JS非常着迷。

$(document).ready(function(){
  $('.form-control').change(function(){
    var make = $(this).val();
    if(make != 'make-any'){
      $('.makes').hide();
      $('.'+make).show();
      } else {
        $('.makes').show();
        }
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control select-box">
             <option value="make-any">Make (Any)</option>
             <option value='BMW' selected>BMW</option>
              <option value='AUDI'>AUDI</option>
</select>
<div class="BMW makes">BWM Stuff</div>
<div class="AUDI makes" style="display: none;">AUDI Stuff</div>

相关文章：