Javascript 运行第二个脚本时取消jQuery.hide

我对如何在我的网站上解决这个bug有点困惑

问题

我为我的网站开发了一个过滤器，它根据某些div是否与过滤器中的select元素匹配来显示和隐藏它们

当运行第一个jQuery过滤器脚本时，工作正常，当我使用另一个jQuery脚本应用第二个select元素时

下面是一个例子，如果你对我所说的感到困惑：

正如您在视频中看到的，如果我选择任何一个选择元素，它都可以正常工作，问题是当选择另一个选择元素时，第一个选择元素被取消。在我的视频示例中，您可以看到我选择Make，然后选择minprice元素，当我选择第二个元素时，它取消了Make过滤器

我的代码设置：

首先，我将显示列表页面代码：

<div class="makes ' . $row["Make"] . '">
        <div class="listing-container">
          <a href="carview.php?id='.$row["FullRegistration"].'"><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">
         <a href="carview.php?id='.$row["FullRegistration"].'"><img data-original="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder lazy"/></a>
          <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>
          <a href="carview.php?id='.$row["FullRegistration"].'"><button class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details 
          </button></a>
          <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> 

如果select值不等于带有makes的div类，那么它将被隐藏，这相当简单

然后，我使用这段代码根据显示的价格显示“makes”div：

$('select').change(function () {
    var min = $('select.price-min').val();
    var max = $('select.price-max').val();
    $('div.makes').show();
    $('h3.price-listing').filter(function () {
        var price = +$(this).text().substring(1).replace(',', '');
        if (price < min || price > max) return true;
    }).closest('div.makes').hide();
})

$（'select'）。更改（函数（）{
var min=$（'select.price min'）.val（）；
var max=$（'select.price max'）.val（）；
$（'div.makes'）.show（）；
$（'h3.price listing'）.filter（函数（）{
var price=+$（this.text（）.substring（1）.replace（'，'，''）；
if（pricemax）返回true；
}).closest（'div.makes'）.hide（）；
})

这就是我的页面的基本设置

正如我前面提到的，为什么我的select元素会相互抵消，而不是同时应用这两个脚本

谢谢

： 如果我们理解正确，所有时间过滤器都应该根据品牌和价格范围进行

您的所有JavaScript应该如下所示

函数filterCars（）{
//基于Make的滤波器
var selectedMake=$（'.make select'）.val（）；
如果（selectedMake&&selectedMake！=“任意制作”）{
$（'.make'）.hide（）；
$（'..+selectedMake.show（）；
}否则{
$（'.makes'）.show（）；
}
//基于价格范围的过滤器
var min=$（'select.price min'）.val（）；
var max=$（'select.price max'）.val（）；
如果（最低==“最低价格”和最高==“最高价格”）返回；
$（'h3.price listing'）.filter（函数（）{
var price=+$（this.text（）.substring（1）.replace（'，'，''）；
如果（最小！=“最小价格”&&pricemax）返回1；
返回0；
}).closest（'div.makes'）.hide（）；
}
$（函数（）{
//此调用在初始加载时过滤
过滤卡（）；
//这一个处理或监听MakeList和PriceLists的项目更改
$（'select.price selector，select.make select'）.change（filterCars）；
});

感谢您的回复，我尝试了这段代码，但得到的结果与之前完全相同，我尝试用您提供的代码块替换我的最后一段代码，知道原因吗？@PeterHardy更新了答案，以处理品牌和价格范围的过滤器

$(document).ready(function(){
  $('.make-select').change(function(){
    var make = $(this).val();
    if(make != 'make-any'){
      $('.makes').hide();
      $('.'+make).show();
     } else {
       $('.makes').show();
    }
  });
  $('.make-select').trigger("change");
});

$('select').change(function () {
    var min = $('select.price-min').val();
    var max = $('select.price-max').val();
    $('div.makes').show();
    $('h3.price-listing').filter(function () {
        var price = +$(this).text().substring(1).replace(',', '');
        if (price < min || price > max) return true;
    }).closest('div.makes').hide();
})

<script>
    function filterCars() {
        //filter based on Make
        var selectedMake = $('.make-select').val();
        if (selectedMake && selectedMake != 'make-any') {
            $('.makes').hide();
            $('.' + selectedMake).show();
        } else {
            $('.makes').show();
        }

        //filter based on price range
        var min = $('select.price-min').val();
        var max = $('select.price-max').val();
        if (min === "min-price" && max === "max-price") return;
        $('h3.price-listing').filter(function () {
            var price = +$(this).text().substring(1).replace(',', '');
            if (min != "min-price" && price < min) return 1;
            if (max != "max-price" && price > max) return 1;
            return 0;
        }).closest('div.makes').hide();
    }
    $(function () {
        //this call filters on initial load
        filterCars();

        //This one handles or listens on item change of MakeList and PriceLists
        $('select.price-selector,select.make-select').change(filterCars);
    });
</script>