原生js实现商品筛选 |
您所在的位置：网站首页 › 网站筛选 › 原生js实现商品筛选 |
|
用到的知识：js基础、dom、第一种方法用到的是js中的数组方法，第二种方法用到的是json和for-in以及es6 实现步骤 1、根据数据结构生成HTML结构（利用dom操作） 2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数 3、点击a标签，把a标签的内容添加在对象中，同时添加样式 4、根据对象存的属性生成选择则条件的HTML结构（按顺序排列） 5、点击关闭选择的条件，删除数据，移除HTML结构，去除在其对应的li中的样式 第一种方法 window.onload = function(){ var oType = document.getElementById('type'); var oChoose = document.getElementById('choose'); var oChosDiv = oChoose.getElementsByTagName('div')[0]; var crumbData = [ { "title": "品牌", "data": [ "苹果","小米","锤子","魅族","华为","三星","OPPO","vivo","乐视"] }, { "title": "尺寸", "data": ["4.0-4.5英寸","4.6-4.9英寸","5.0-5.5英寸","6.0英寸以上"] }, { "title": "系统", "data": ["android","ios","window phone","无","其他"] }, { "title": "网络", "data": ["联通3G","双卡单4G","双卡双4G","联通4G"] } ] //利用dom动态添加元素 for(var i=0; i |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |