jQuery多条件筛选如何实现

jQuery多条件筛选是指根据不同的筛选条件来过滤和显示指定数据的过程。下面是该过程实现的完整攻略：

1. HTML结构设计

首先，在HTML中设计好数据展示的结构，常见的多条件筛选包括输入框、下拉框和复选框。例如，以下是一个包括筛选条件和数据展示的HTML结构：

<div id="filter">
  <input type="text" id="name-filter" placeholder="Name">
  <select id="city-filter">
    <option value="">Filter by City</option>
    <option value="beijing">Beijing</option>
    <option value="shanghai">Shanghai</option>
    <option value="guangzhou">Guangzhou</option>
  </select>
  <input type="checkbox" id="is-featured" value="1">Featured only
</div>

<div id="data">
  <div class="person" data-name="John" data-city="beijing" data-featured="0">...</div>
  <div class="person" data-name="Mary" data-city="shanghai" data-featured="1">...</div>
  <div class="person" data-name="Tom" data-city="guangzhou" data-featured="0">...</div>
  ...
</div>

其中，筛选条件包括姓名、城市和是否展示精选人员（featured），数据展示采用一个div元素显示一位人员的信息。在每个div元素中设置一些自定义的data-*属性，方便在后续筛选时查询。

1. 编写jQuery脚本

针对以上HTML结构，我们可以通过jQuery编写脚本实现多条件筛选功能。例如，以下是一个具有多条件筛选功能的脚本：

$(document).ready(function() {
  // 监听筛选条件发生变化
  $('#filter').on('change keyup', function() {
    var nameFilter = $('#name-filter').val().toLowerCase();
    var cityFilter = $('#city-filter').val();
    var isFeatured = $('#is-featured').is(':checked');

    // 遍历每个数据项进行筛选
    $('#data .person').each(function() {
      var name = $(this).data('name').toLowerCase();
      var city = $(this).data('city');
      var featured = $(this).data('featured');

      // 通过筛选条件来判断是否展示该数据项
      var show = true;
      if (nameFilter && name.indexOf(nameFilter) < 0) {
        show = false;
      }
      if (cityFilter && cityFilter !== city) {
        show = false;
      }
      if (isFeatured && !featured) {
        show = false;
      }

      // 根据筛选结果来显示或隐藏该数据项
      if (show) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
});

其中，逻辑较为简单：

• 监听筛选条件的变化，当用户输入或选择条件时，触发筛选过程。
• 遍历每个数据项（通过类名.person选取），对每个数据项进行筛选。
• 根据每个数据项是否满足筛选条件来判断是否展示该数据项。
• 最后根据筛选结果来显示或隐藏该数据项。

该脚本实现了根据姓名、城市和是否展示精选人员来进行多条件筛选的功能。

以下是两个具体的示例：

示例一：根据姓名筛选

在输入框输入“John”时，会自动过滤掉除姓名包括“John”以外的数据项。

示例二：根据城市和精选状态同时筛选

选择“Guangzhou”城市，勾选“Featured Only”时，只展示出“Guangzhou”城市中精选人员的数据项。