JS实现商品筛选功能

每天一个射流研究…小演示之商品筛选。主要知识点：DOM方法综合运用

效果图：

代码：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title document/title style type=' text/CSS ' nav { height : 50px；}导航跨度{ margin: 0 5px}。显示{color:红色；}/style/head dynav/navullistrong手机：/strong a href=' JavaScript :'锤子T1/aa href=' JavaScript :'锤子T2/aa href=' JavaScript :'坚果U1/aa href=' JavaScript :'锤子M1/aa href=' JavaScript :'坚果Pro/a/lilistrong价格：/strong a href=' JavaScript :'3200/aa href=' JavaScript :'2600/aa href=' JavaScript :'899/aa href=' JavaScript :'2799/aa href=' JavaScript :'2299/a/lilistrong屏幕：/strong a href=' JavaScript :'399/aa href=' JavaScript :'600/aa href=' JavaScript :'800/aa href=' JavaScript :'1200/a/Li/ulscript type=' text/JavaScript '(function(){ var nav=document。query selector(' nav ')；var Li=文档。query selectorall(' Li ')；var id=[]；for(var I=0；长度；i ){setClick(li[i]，I)；}函数setClick(父，索引){ var option=parent。getelementsbytagname(' a ')；for(var I=0；我选项。长度；i ){/*建一个数组*/选项[i].onclick=function(){ for(var I=0；我选项。长度；I){选项[i].class NAmE=} this . class NAmE=' show var span=ids[index]；if(id[index]){ span。儿童[0].innerHTML=this.innerHTML返回；} span=文档。创建元素(“span”)；var a=文档。创建元素(' a ')；var strong=文档。创建元素(' strong ')；a . innerhtml=' xa . href=' JavaScript : '；a . onclick=function(){ nav。移除子(span)；ids[index]=' '；/*删除元素清空数组对象位*/for(var I=0；我选项。长度；I){选项[i].className=} } strong。InnerHTML=这个。InnerHTMLspan.appendChild(强);跨度。append child(a)；ids[index]=span；/*元素生成之后，先存入数组的对应位*//*按照数组的顺序重新添加一遍元素*/for(var I=0；I id . LengTii){ if(id[I]){ nav。append child(id[I])；}}};}}})();/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。