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 相关文章推荐
javascript 二进制运算技巧解析
Nov 27 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
有关Promises异步问题详解
Nov 13 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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网上调查系统
2006/10/09 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
PHP面试题集
2016/12/18 面试题
大学生职业规划书的范本
2014/02/18 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
老兵退伍感言
2015/08/03 职场文书
教师远程培训心得体会
2016/01/09 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
python实现语音常用度量方法的代码详解
2021/05/25 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers