编程 Javascript

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>

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

JS实现商品筛选功能

- Author -

catEatBird

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery学习笔录简单的JQuery

Apr 09 Javascript

php析构函数的具体用法小结

Mar 11 Javascript

Node.js模拟浏览器文件上传示例

Mar 26 Javascript

每日十条JavaScript经验技巧(二)

Jun 23 Javascript

angularjs 实现带查找筛选功能的select下拉框实例

Jan 11 Javascript

JavaScript实现的XML与JSON互转功能详解

Feb 16 Javascript

使用Vue自定义数字键盘组件(体验度极好)

Dec 19 Javascript

微信小程序实现城市列表选择

Jun 05 Javascript

vue-router中scrollBehavior的巧妙用法

Jul 09 Javascript

echarts整合多个类似option的方法实例

Jul 10 Javascript

JavaScript实现正则去除a标签并保留内容的方法【测试可用】

Jul 18 Javascript

微信小程序自定义带价格显示日历效果

Dec 29 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