原生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”和“水煮鱼”时,应该只显示这一家餐厅。
本文标题为:原生JS实现多条件筛选
基础教程推荐
- 关于 css:带有 SVG 文本动画 (CSS3) 的工件 2022-09-21
- JavaScript Image对象实现原理实例解析 2023-08-08
- 301重定向html网页跳转代码实例 2023-10-28
- 微信小程序使用webview打开pdf文档以及显示网页内 2022-08-30
- linux – wkhtmltopdf – QXcbConnection:无法连接到显示器 2023-10-25
- ajax实现文件异步上传并回显文件相关信息功能示例 2023-02-15
- 在苹果Mac中如何将html网页转成PDF文件? 2023-10-27
- 微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价) 2022-10-21
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443 2023-10-08