原生JS实现多条件筛选-前端开发

原生JS实现多条件筛选的完整攻略如下：

原生JS实现多条件筛选的完整攻略如下：

1. HTML结构

首先，我们需要搭建HTML结构，例如：

<div>
  <label for="input1">条件1：</label>
  <input type="text" id="input1">
</div>
<div>
  <label for="input2">条件2：</label>
  <input type="text" id="input2">
</div>
<div>
  <label for="input3">条件3：</label>
  <input type="text" id="input3">
</div>
<button id="btn">筛选</button>
<ul id="list">
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
  ...
</ul>

在这个HTML结构中，我们使用了 label 元素和 input 元素，用于表示多个筛选条件的输入框；还增加了一个 button 元素，通过点击按钮实现筛选功能；最后是一个 ul 元素，用于呈现筛选后的结果列表。

2. JavaScript实现

接下来，我们使用JavaScript实现多条件筛选的功能。

我们可以通过给上述 input 元素添加一个 class 属性来进行选择，例如：

<div>
  <label for="input1">条件1：</label>
  <input type="text" id="input1" class="filter">
</div>
<div>
  <label for="input2">条件2：</label>
  <input type="text" id="input2" class="filter">
</div>
<div>
  <label for="input3">条件3：</label>
  <input type="text" id="input3" class="filter">
</div>
<button id="btn">筛选</button>
<ul id="list">
  <li data-name="内容1" data-type="A">内容1</li>
  <li data-name="内容2" data-type="B">内容2</li>
  <li data-name="内容3" data-type="A">内容3</li>
  ...
</ul>

在上述HTML结构中，我们为每一个 li 元素添加了两个自定义属性：data-name 和 data-type，用于表示不同类型的内容。接下来，我们使用JavaScript代码来实现筛选功能：

const btn = document.querySelector('#btn');
const filters = document.querySelectorAll('.filter');
const list = document.querySelector('#list').children;

btn.addEventListener('click', () => {
  const filterValues = Array.from(filters).map(filter => filter.value.trim().toLowerCase());

  Array.from(list).forEach(item => {
    const name = item.getAttribute('data-name').toLowerCase();
    const type = item.getAttribute('data-type').toLowerCase();
    const show = filterValues.every(filterValue => name.includes(filterValue) || type.includes(filterValue));
    item.style.display = show ? 'block' : 'none';
  });

});

上述代码解析：

首先，我们使用 querySelector 和 querySelectorAll 方法选择需要的元素，分别为：button 元素，所有带有 .filter 类的 input 元素，和 ul 元素下的子元素 li。
接下来，我们为 button 元素添加 click 事件监听器，用于实现筛选功能。
在 click 事件监听器中，我们首先通过 Array.from 方法将 input 元素的值转换成数组，并使用 map 方法获取到每个输入框的值，然后进行简单的处理，例如去除字符串前后空格并转化为小写字母。
接下来，我们使用 Array.from 和 forEach 配合 item.style.display，遍历 ul 元素下的所有子元素 li，并从中获取 data-name 和 data-type 属性值，同样进行处理，最后使用 includes 方法进行检索筛选。
对于每个 li 元素，如果 name 或 type 包含了所有搜索关键字，则展示该元素，否则隐藏该元素。

3. 示例说明

以下是两个多条件筛选的实例说明：

示例一

如果我们需要根据不同的地区和商品类型筛选产品，则可以使用以下HTML结构：

<div>
  <label for="search1">地区：</label>
  <input type="text" id="search1" class="filter">
</div>
<div>
  <label for="search2">商品类型：</label>
  <input type="text" id="search2" class="filter">
</div>
<button id="btn">筛选</button>

<table id="product">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>所属地区</th>
      <th>商品类型</th>
    </tr>
  </thead>
  <tbody>
    <tr data-region="华东" data-product="电视">
      <td>小米电视</td>
      <td>3999</td>
      <td>华东</td>
      <td>电视</td>
    </tr>
    <tr data-region="华南" data-product="电视">
      <td>TCL电视</td>
      <td>1999</td>
      <td>华南</td>
      <td>电视</td>
    </tr>
    <tr data-region="华南" data-product="手机">
      <td>华为手机</td>
      <td>2999</td>
      <td>华南</td>
      <td>手机</td>
    </tr>
  </tbody>
</table>

在上述HTML结构中，我们使用了一个 table 元素呈现产品列表，使用 data-region 和 data-product 自定义属性来存储产品的地区和类型信息。接下来，我们使用上述JavaScript代码来实现筛选功能，例如：当输入“华南”和“手机”时，应该只显示华南地区的手机产品。

示例二

如果我们需要根据关键字筛选餐厅，例如地址、电话和特色菜，则可以使用以下HTML结构：

<div>
  <label for="search1">地址：</label>
  <input type="text" id="search1" class="filter">
</div>
<div>
  <label for="search2">电话：</label>
  <input type="text" id="search2" class="filter">
</div>
<div>
  <label for="search3">特色菜：</label>
  <input type="text" id="search3" class="filter">
</div>
<button id="btn">筛选</button>

<ul id="restaurant">
  <li data-name="张三私房菜" data-address="广东省深圳市南山区科技园南区B2栋" data-phone="0755-12345678">张三私房菜</li>
  <li data-name="李四家常菜" data-address="广东省深圳市龙岗区横岗镇万象城2楼"></li>
  <li data-name="王五川菜馆" data-address="广东省广州市天河区体育中心大厦11楼" data-phone="020-88888888" data-feature="水煮鱼">王五川菜馆</li>
</ul>

在上述HTML结构中，我们使用了一个 ul 元素呈现餐厅列表，使用 data-name、data-address、data-phone 和 data-feature 自定义属性来存储餐厅的信息。接下来，我们使用上述JavaScript代码来实现筛选功能，例如：当输入“深圳”、“12345678”和“水煮鱼”时，应该只显示这一家餐厅。

1. HTML结构

2. JavaScript实现

3. 示例说明

示例一

示例二

基础教程推荐