脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS商品筛选功能

JS实现商品筛选功能

 更新时间：2020年08月19日 11:38:38   作者：catEatBird  
这篇文章主要为大家详细介绍了JS实现商品筛选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果图：

代码：

<!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实现简单的todoList(记事本)效果

    JS实现简单的todoList(记事本)效果

    这篇文章主要为大家详细介绍了JS实现简单的todoList（记事本）效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js简单遍历获取对象中的属性值的方法示例

    js简单遍历获取对象中的属性值的方法示例

    这篇文章主要介绍了js简单遍历获取对象中的属性值的方法,涉及javascript使用for循环遍历json对象属性值的简单操作技巧,需要的朋友可以参考下
    2019-06-06
  • javascript 文档的编码问题解决

    javascript 文档的编码问题解决

    在引用与本页面编码格式不一样的js文档时，如果被引用的js代码有ASCII字符之外的字符，那么就会出现代码错误。
    2009-03-03
  • 三分钟带你快速学会微信小程序的条件渲染

    三分钟带你快速学会微信小程序的条件渲染

    所谓的条件渲染就是判断是否需要把代码渲染到展示页面上,下面这篇文章主要给大家介绍了关于微信小程序条件渲染的相关资料,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • JS+JSP checkBox 全选具体实现

    JS+JSP checkBox 全选具体实现

    本文为大家介绍下使用JS+JSP实现checkBox全选，下面有个不错的示例，感兴趣的朋友可以参考下
    2014-01-01
  • IE与Firefox在JavaScript上的7个不同写法小结

    IE与Firefox在JavaScript上的7个不同写法小结

    尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去，偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。
    2009-09-09
  • 微信小程序实现卡片左右滑动效果的示例代码

    微信小程序实现卡片左右滑动效果的示例代码

    这篇文章主要介绍了微信小程序实现卡片左右滑动效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • iOS微信H5页面橡皮回弹效果的踩坑记录

    iOS微信H5页面橡皮回弹效果的踩坑记录

    移动端开发时,H5长页面在iOS系统中滑动时,当页面滑动到顶部或底部时,页面还能够上滑或下滑,手指离开屏幕后回弹,这就时橡皮筋效果,这篇文章主要给大家介绍了关于iOS微信H5页面橡皮回弹效果的相关资料,需要的朋友可以参考下
    2021-07-07
  • js 实现复选框只能选择一项的示例代码

    js 实现复选框只能选择一项的示例代码

    下面小编就为大家分享一篇js 实现复选框只能选择一项的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • JS解决 Array.fill()参数为对象指向同一个引用地址的问题

    JS解决 Array.fill()参数为对象指向同一个引用地址的问题

    这篇文章主要介绍了JS解决 Array.fill()参数为对象指向同一个引用地址问题，解决方案使用map返回出不同的引用的地址，fill参数可随意填写（不为空），主要是map函数中返回的数据,需要的朋友可以参考下
    2023-02-02

最新评论