原生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-namedata-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';
  });

});

上述代码解析:

  • 首先,我们使用 querySelectorquerySelectorAll 方法选择需要的元素,分别为:button 元素,所有带有 .filter 类的 input 元素,和 ul 元素下的子元素 li

  • 接下来,我们为 button 元素添加 click 事件监听器,用于实现筛选功能。

  • click 事件监听器中,我们首先通过 Array.from 方法将 input 元素的值转换成数组,并使用 map 方法获取到每个输入框的值,然后进行简单的处理,例如去除字符串前后空格并转化为小写字母。

  • 接下来,我们使用 Array.fromforEach 配合 item.style.display,遍历 ul 元素下的所有子元素 li,并从中获取 data-namedata-type 属性值,同样进行处理,最后使用 includes 方法进行检索筛选。

  • 对于每个 li 元素,如果 nametype 包含了所有搜索关键字,则展示该元素,否则隐藏该元素。

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-regiondata-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-namedata-addressdata-phonedata-feature 自定义属性来存储餐厅的信息。接下来,我们使用上述JavaScript代码来实现筛选功能,例如:当输入“深圳”、“12345678”和“水煮鱼”时,应该只显示这一家餐厅。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JS实现多条件筛选 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • nodejs中实现阻塞实例

    实现阻塞实例需要用到Node.js中的核心模块fs和util。其中,fs模块用于读取文件内容,util模块中的promisify方法用于将回调函数转化为返回Promise对象的函数。 下面是一个完整的实现阻塞实例的攻略,包含两条示例说明: 1. 读取文件并输出内容 1.1 创建文件 首先,需要创建一个文件example.txt,并向其中写入一些内容。 ech…

    JavaScript 2023年5月28日
    00
  • JavaScript 判断iPhone X Series机型的方法

    下面是详细讲解”JavaScript 判断iPhone X Series机型的方法” 的完整攻略。 前言 首先,我们需要了解一下 iPhone X Series 机型的特点,它们比一般的 iPhone 机型拥有更高的设备屏幕分辨率,并且它们的设备宽高比(device aspect ratio)都是 1125:2436。 判断方法 为了判断一个设备是否为 iP…

    JavaScript 2023年6月11日
    00
  • Vue中引入json的三种方式总结

    一共有三种方式可以在Vue中引入JSON文件,分别是通过异步请求、在Vue文件中直接定义JSON数据、在Vue组件中导入JSON文件。以下是每一种方式的详细讲解: 1. 异步请求 使用异步请求可以从其他地方获取JSON文件,在Vue组件中引入数据。 在Vue组件的created或mounted生命周期钩子函数中,使用axios或fetch等方式进行异步请求,…

    JavaScript 2023年5月27日
    00
  • KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定

    KnockoutJS是一款流行的JavaScript库,针对一个web应用程序的建立提供了比较好的基础架构。其中,表单的数据绑定功能是KnockoutJS最为常用的功能之一。本文将详细讲解KnockoutJS 3.x API中与表单数据绑定相关的submit、enable、disable绑定和使用方法,并提供两个具体的示例说明。 一、submit绑定 sub…

    JavaScript 2023年6月10日
    00
  • egg.js的基本使用实例

    下面我为大家讲解一下 Egg.js 的基本使用实例: 简介 Egg.js 是一个基于 Node.js 和 Koa.js 的企业级应用开发框架,它提供了一套易于上手的约定和最佳实践,并基于这些约定和最佳实践提供了适用于企业级应用的各种插件和扩展,同时还支持基于插件的扩展机制,让用户可以根据自己的需要对框架进行个性化定制。 安装 安装 Egg.js 的前提条件是…

    JavaScript 2023年6月11日
    00
  • 浅谈JavaScript 声明提升

    浅谈JavaScript 声明提升 声明提升的概念 在JavaScript中,声明提升指的是在代码执行阶段,JavaScript引擎会把所有声明的变量和函数提升至当前作用域的顶部,但是赋值操作并不会提升。这意味着可以在变量和函数声明之前使用它们,因为它们已经被预处理并提升到作用域顶部。 变量声明提升 变量声明提升指的是在JavaScript引擎执行代码之前,…

    JavaScript 2023年5月18日
    00
  • JavaScript中的Math.sin()方法使用详解

    当我们使用JavaScript编写数学计算程序时,可能需要计算三角函数值。Math.sin()方法正是用于计算正弦值的方法之一。以下是详细的使用说明。 Math.sin()方法简介 Math.sin(x)方法返回一个数值x弧度的正弦值。弧度是角度的单位,数学公式中表示为radian。通常的计算机以角度为单位,因此需要将角度转化为弧度后再进行计算。 Math.…

    JavaScript 2023年5月27日
    00
  • Javascript Array slice 方法

    以下是关于JavaScript Array slice方法的完整攻略。 JavaScript Array slice方法 JavaScript Array slice方法用于从数组中提取指定的元素,并将其作为一个新数组返回。该方法不改变原始数组,而是返回一个新的数组。 下面是一个使用slice方法的示例: var arr = [1, 2,3, 4, 5]; …

    JavaScript 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部