原生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日

相关文章

  • 使用Python解析JSON的实现示例

    下面我将为您详细讲解“使用Python解析JSON的实现示例”的完整攻略。 一、JSON简介 JSON全称为JavaScript Object Notation,它是一种轻量级的数据交换格式。在现代的Web应用开发中,JSON作为一种简单、易于理解的数据格式而备受推崇,常常使用在前后端数据交互、API接口等场景中。 一个JSON对象由一些键值对组成,键值对之…

    JavaScript 2023年6月11日
    00
  • Vue-Router进阶之滚动行为详解

    Vue-Router进阶之滚动行为详解 什么是滚动行为?为什么需要滚动行为? 在Vue-Router中,我们可以使用路由跳转来实现前后端页面之间的跳转,但是当我们来回切换不同的路由时会发现一个问题:每次切换完页面,新页面都会从顶部开始显示,这给用户带来了不好的体验。 这个问题可以通过设置滚动行为来解决。滚动行为可以定义在路由配置中,配合自定义行为函数,实现路…

    JavaScript 2023年6月11日
    00
  • react-router-dom v6 使用详细示例

    这里给出使用 React-Router-Dom 版本 6.x 的详细攻略,包含基本概念、用法介绍、代码示例等,方便大家快速上手。 基本概念 React-Router-Dom 是一个 React 的声明式路由库,在 React 应用中使用路由的时候非常方便。在使用 React-Router-Dom 时,主要涉及到以下几个核心概念: Router:定义路由的容器…

    JavaScript 2023年6月11日
    00
  • JavaScript中判断整数的多种方法总结

    JavaScript中判断整数有多种方法,以下是一些经典的方法: 方法一:使用正则表达式 function isInteger(num) { return /^\d+$/.test(num); } 该方法通过正则表达式来判断一个字符串是否为整数,其中正则表达式/^\d+$/表示以数字开头并以数字结尾,中间包含一到多个数字。 示例1: console.log(…

    JavaScript 2023年5月28日
    00
  • 基于JavaScript 性能优化技巧心得(分享)

    基于JavaScript 性能优化技巧心得(分享) JavaScript 在网页交互中扮演着非常重要的角色,但是 JavaScript 的执行效率相对较差,因此,为了提高网页性能,我们需要对 JavaScript 进行性能优化。本文将介绍几个基于 JavaScript 性能优化技巧的心得。 减少全局变量使用 全局变量在 JavaScript 中会优先存在于全…

    JavaScript 2023年6月11日
    00
  • javascript动画对象支持加速、减速、缓入、缓出的实现代码

    实现JavaScript动画对象支持加速、减速、缓入、缓出的过程基本分为以下几个步骤: 定义动画对象,设置初始值和目标值 设置动画的持续时间、缓动方式等参数 在动画前缓存当前状态 执行动画过程,不断更新当前状态 到达目标值后停止动画 下面详细介绍一下每个步骤 1. 定义动画对象 定义动画对象可以使用原生Javascript实现,例如: var element…

    JavaScript 2023年6月10日
    00
  • js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前

    下面是“js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前”的完整攻略: 步骤一:获取时间戳 在开始计算与当前时间相差多久之前,我们需要获取时间戳。时间戳是指自 1970 年 1 月 1 日 00:00:00 UTC 起至现在的总秒数。 我们可以通过 JavaScript 的 Date 对象获取当前的日期时间,然后将其转换为时间戳。示例代码如下: …

    JavaScript 2023年5月27日
    00
  • Javascript中的匿名函数与封装介绍

    Javascript中的匿名函数与封装介绍 Javascript中的匿名函数和封装是两个非常重要的概念。使用匿名函数可以避免全局变量污染,而封装则可以保护代码,避免不必要的干扰和修改。本文将详细讲解Javascript中的匿名函数和封装,以及如何使用它们来提高你的代码质量和安全性。 匿名函数 匿名函数是Javascript中的一种特殊函数,它没有函数名,只有…

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