JS实现商品筛选功能


Posted in Javascript onAugust 19, 2020

每天一个JS 小demo之商品筛选。主要知识点:DOM方法综合运用

效果图:

JS实现商品筛选功能

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
nav {
height: 50px;
}
nav span {
margin: 0 5px;
}
.show {
color: red;
}
</style>
</head>
<body>
<nav></nav>
<ul>
<li>
<strong>手机:</strong>
<a href="javascript:;">锤子T1</a>
<a href="javascript:;">锤子T2</a>
<a href="javascript:;">坚果U1</a>
<a href="javascript:;">锤子M1</a>
<a href="javascript:;">坚果Pro</a>
</li>
<li>
<strong>价格:</strong>
<a href="javascript:;">3200</a>
<a href="javascript:;">2600</a>
<a href="javascript:;">899</a>
<a href="javascript:;">2799</a>
<a href="javascript:;">2299</a>
</li>
<li>
<strong>屏幕:</strong>
<a href="javascript:;">399</a>
<a href="javascript:;">600</a>
<a href="javascript:;">800</a>
<a href="javascript:;">1200</a>
</li>
</ul>
<script type="text/javascript">
(function(){
var nav = document.querySelector('nav');
var li = document.querySelectorAll('li');
var ids = [];
for(var i = 0; i <li.length; i++){
setClick(li[i],i);
}
function setClick(parent,index){
var option = parent.getElementsByTagName("a");
for(var i = 0; i < option.length; i++){
/*
建一个数组
*/
option[i].onclick = function(){
for(var i = 0; i < option.length; i++){
option[i].className = "";
}
this.className = "show";
var span = ids[index];
if(ids[index]){
span.children[0].innerHTML = this.innerHTML;
return;
}
span = document.createElement("span");
var a = document.createElement("a");
var strong = document.createElement("strong");
a.innerHTML = "x";
a.href="javascript:;";
a.onclick = function(){
nav.removeChild(span);
ids[index]="";
/*
删除元素清空数组对象位
*/
for(var i = 0; i < option.length; i++){
option[i].className = "";
}
}
strong.innerHTML = this.innerHTML;
span.appendChild(strong);
span.appendChild(a);
ids[index] = span;
/*
元素生成之后,先存入数组的对应位
*/

/*
按照数组的顺序重新添加一遍元素
*/
for(var i = 0; i < ids.length; i++){
if(ids[i]){
nav.appendChild(ids[i]);
}
}
};
}
}
})(); 
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
学习ExtJS border布局
Oct 08 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
jquery滚动特效集锦
Jun 03 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
vue与django集成打包的实现方法
Nov 11 Javascript
node文件上传功能简易实现代码
Jun 16 #Javascript
详解webpack 多入口配置
Jun 16 #Javascript
requirejs + vue 项目搭建详解
Jun 16 #Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 #Javascript
基于AngularJS实现的工资计算器实例
Jun 16 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
jquery中.add()的使用分析
2013/04/26 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
简述JS控制台的使用
2018/07/15 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
python内存管理分析
2015/04/08 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python进阶篇之字典操作总结
2016/11/16 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
softmax及python实现过程解析
2019/09/30 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python @property及getter setter原理详解
2020/03/31 Python
为什么是 Python -m
2020/06/19 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
电子工程专业毕业生求职信
2014/03/14 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年实习生工作总结
2014/11/27 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL