jQuery过滤多个数据属性

Question

我在我的网站上有一份汽车销售清单，还有五个过滤器：

1. Make
2. Model
3. Year
4. Mileage
5. Price

具有多个选项的...each，用户可以通过这些选项进行筛选。

当用户检查筛选列表中的一个或多个选项时，我需要隐藏不匹配所有所选过滤器的汽车。

以下是其中一辆汽车的HTML：

<div class="home-car-div">
    <div class="home-car-description-div">
        <p class="home-car-info" data-year="2018" data-make="Ford" data-model="Escape" data-mileage="10000" data-price="18900">
            2018 Ford Escape
        </p>
    </div>
</div>

下面是其中一个过滤器：

<div class="car-filters">
    <div class="make-section">
        <p class="filter-title">Make</p>
        <div id="makeSection" data-group="make">
            <label class="filter-input">
                <input type="checkbox" name="make" class="make" value=“Ford”>Ford
            </label>
            <label class="filter-input">
                <input type="checkbox" name="make" class="make" value="Subaru"> Subaru
            </label>
        </div>
    </div>
</div>

我在网站上跟踪了一些其他的问题，而且我似乎已经完成了大部分工作。每当用户选中一个筛选器复选框时，我就会在键/值对数组中获取每个属性的所有值：

var $filterCheckboxes = $( '.filter-input input' );

$filterCheckboxes.on( 'change', function() {
        
    $('.home-car-div').show();
        
    var selectedFilters = {};
            
    $filterCheckboxes.filter( ':checked' ).each( function() {
        
        if ( ! selectedFilters.hasOwnProperty( this.name ) ) {
            selectedFilters[ this.name ] = [];
        }
            
        selectedFilters[ this.name ].push( this.value );
        
    });
          
    $('.home-car-info').each(function() {
        var carMake = $(this).data('make');
        var carModel = $(this).data('model');
        var carYear = $(this).data('year');
        var carPrice = $(this).data('price');
        var carMileage = $(this).data('mileage');
                    
        var filteredMake = selectedFilters.make;
        var filteredModel = selectedFilters.model;
        var filteredYear = selectedFilters.year;
        var filteredPrice = selectedFilters.price;
        var filteredMileage = selectedFilters.mileage;
                
    });
        
});

所以现在我有了每个汽车属性的变量，以及每个过滤后的选择的变量，但是我现在需要比较每一个属性，并以某种方式隐藏不匹配所有属性的汽车。

如果没有结果的话，我也想给你一个信息。

我是否在正确的轨道上，如何进行过滤？

Answer 1

我相信这和你想要的很接近。我使用函数编程来对数据类别执行操作，而不是单个元素。并没有真正遵守这样的要求：“隐藏不匹配所有属性的汽车”，因为对于" make“和"model”这样的互斥属性，这种要求没有意义。还删除了一些无关的类，并在标签上使用了"for“属性(参见this)。

实现取决于这样一种假设，即如果没有选择某个类别中的任何内容，那么汽车将匹配该类别。

注意: JQuery有一个问题，导致它的.data()方法在功能上不同于DOM的.dataset属性，因此使用了this.dataset[category]而不是$(this).data(category)。从技术上讲，这也应该是更好的性能，也可以说是更具可读性。

​

$(function() {
  $('#button').click(function() {
    // Create an map of category name to selected filters
    selectedFilters = $('.car-filters input:checked').get().reduce( function(a, c) { a[c.name] = (a[c.name] || []); a[c.name].push(c.value); return a }, {} )
  
    // filter the list of cars displayed
    match = 0
    unmatchedCars = $('.home-car-info').filter(function() {
      for (const category in selectedFilters) {
        // must match at least one in each category
        if (!selectedFilters[category].includes(this.dataset[category])) {
           console.log(`"${$(this).text().trim()}" does not match ${category} is in [${selectedFilters[category]}] (${category} is ${this.dataset[category]})`)
           return true
        }
        match++
      }
    });
    // do something with unmatchedCars
    unmatchedCars.hide()
    if (!match) {
      console.log("Nothing matches the selected filters")
    }        
  })
  $('#restore').click(function() {
    $('.home-car-info').show()
    $('input:checkbox').prop('checked', false)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home-car-div">
  <div class="home-car-description-div">
    <p class="home-car-info" data-year="2018" data-make="Ford" data-model="Escape" data-mileage="10000" data-price="18900">
      2018 Ford Escape
    </p>
    <p class="home-car-info" data-year="1998" data-make="Porsche" data-model="911" data-mileage="10000" data-price="72500">
      1998 Porsche 911
    </p>
  </div>
</div>
<form>
  <div class="car-filters">
    <div class="make-section">
      <p >Make</p>
      <div id="makeSection" data-group="make">
        <input type="checkbox" id="iaa" name="make" value="Ford"><label for="iaa">Ford</label>
        <input type="checkbox" id="iab" name="make" value="Subaru"><label for="iab">Subaru</label>
        <input type="checkbox" id="iab" name="make" value="Porsche"><label for="iac">Porsche</label>
      </div>
      <p >Model</p>
      <div id="makeSection" data-group="model">
        <input type="checkbox" id="iba" name="model" value="T"><label for="iba">T</label>
        <input type="checkbox" id="ibb" name="model" value="Escape"><label for="ibb">Escape</label>
        <input type="checkbox" id="ibb" name="model" value="911"><label for="ibc">911</label>
      </div>
    </div>
  </div>
  <div>
    <button id="button" type="button">Filter</button>
    <button id="restore" type="button">Restore</button>
  </div>
</form><br />

​