zoukankan      html  css  js  c++  java
  • 商品筛选条件

    需求:1.当点击价格、类别、品牌的时候被点击的元素依次被创建(注意顺序)

       2.当点击创建元素的时候,内容依次还原

    HTML

    <ul>
    	<li>
    		<span>价格:</span>
    		<a href="javascript:;">300-699</a>
    		<a href="javascript:;">700-1099</a>
    		<a href="javascript:;">1100-1999</a>
    		<a href="javascript:;">2000-3599</a>
    		<a href="javascript:;">3600-4299</a>
    		<a href="javascript:;">4300以上</a>
    	</li>
    	<li>
    		<span>类别:</span>
    		<a href="javascript:;">文件夹</a>
    		<a href="javascript:;">办公套装</a>
    		<a href="javascript:;">文件筐</a>
    		<a href="javascript:;">美工刀</a>
    		<a href="javascript:;">三针一钉</a>
    		<a href="javascript:;">风琴包</a>
    		<a href="javascript:;">票夹</a>
    	</li>
    	<li>
    		<span>品牌:</span>
    		<a href="javascript:;">得力</a>
    		<a href="javascript:;">齐心</a>
    		<a href="javascript:;">优必力</a>
    		<a href="javascript:;">三木</a>
    		<a href="javascript:;">GBC</a>
    		<a href="javascript:;">广博</a>
    		<a href="javascript:;">利兰</a>
    	</li>
    </ul>
    <div id="txt"></div>
    

    CSS

    *{
    	margin: 0;
    	padding: 0;
    }
    li{
    	list-style: none;
    	border-bottom: 1px solid #C0C4CB;
    	 800px;
    	line-height: 50px;
    	text-indent: 20px;
    	height: 50px;
    }
    a{
    	text-decoration: none;
    }
    li a{
    	color: #005599;
    	padding: 0 10px;
    }
    li span{
    	padding-right: 80px;
    }
    #txt{
    	margin-top: 20px;
    	margin-left: 10px;
    }
    #txt a{
    	display: inline-block;
    	padding: 8px 10px;
    	border: 1px solid #C4C4C4;
    	margin-right: 20px;
    	color: #2C333A;
    	margin-bottom: 20px;
    	cursor: pointer;
    }
    #txt a i,#txt a em{
    	color: red;
    }
    #txt a em{
    	padding-left: 10px;
    	font-size: 12px;
    	font-weight: bold;
    }
    

    JS

    var lis=document.getElementsByTagName("li");
    var oTxT=document.getElementById("txt");
    var arr=[];
    var arr1=[];
    
    for (var i=0;i<lis.length;i++) {
    	lis[i].index=i;
    	var Btn=lis[i].getElementsByTagName("a");
    	for (var j=0;j<Btn.length;j++) {
    		Btn[j].index=j;
    		Btn[j].onclick=function(){
    			//创建元素a
    			var aAs=document.createElement("a");
    			//记录下标
    			aAs.index=String(this.parentNode.index)+String(this.index);
    			aAs.innerHTML=this.parentNode.children[0].innerHTML+"<i>"+this.innerHTML+"</i><em>X</em>";
    			
    			//分别生成两个数组,并对两个数组进行排序
    			//小标数组
    			arr.push(parseInt(aAs.index));
    			//生成的所有元素数组
    			arr1.push(aAs);
    			
    			//对数组进行排序
    			for (var i=0;i<arr.length;i++) {
    				for (var j=i+1;j<arr.length;j++) {
    					if(arr[i]>arr[j]){
    						var temp=arr[i];
    	                	arr[i]=arr[j];
    	                	arr[j]=temp;
    		            	var temp1=arr1[i];
    		            	arr1[i]=arr1[j];
    		            	arr1[j]=temp1;
    					}
    				}
    				//将排序后的数组元素添加到页面
    				oTxT.appendChild(arr1[i]);
    			}
    			//删除被选中的条件
    			this.style.display="none";
    			
    			//点击取消条件选择
    			var txtBtn=oTxT.getElementsByTagName("a");
    			
    			for (var i=0;i<txtBtn.length;i++) {
    				txtBtn[i].onclick=function(){
    					//条件列表中的该条件显示
    					lis[this.index[0]].children[parseInt(this.index[1])+1].style.display="inline";
    //					console.log(lis[this.index[0]].children[parseInt(this.index[1])+1]);
    					
    					//删除该筛选条件
    					this.parentNode.removeChild(this);
    					
    					//重置数组
    					arr=[];
    					arr1=[];
    					for (var i=0;i<oTxT.children.length;i++) {
    						arr.push(oTxT.children[i].index);
    						arr1.push(oTxT.children[i]);
    					}
    				}
    			}
    		}
    	}
    }
    

      

  • 相关阅读:
    HTML 照片从模糊到清晰的渐变加载显示方法
    Vue -- 从vue-cli 到@vue/cli 安装
    Vue -- highcharts map使用
    Vue -- admin
    EXCEL根据行列值查询得到交叉点值的方法
    如何使用curl命令测试负载均衡SLB会话保持的有效性
    centos7 pdsh安装
    selenium调用Chrome时自动选择证书
    jenkins使用 HTML Publisher插件后查看 html 报告显示不正常
    spring boot Jackson忽略字段不序列化字段
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8078905.html
Copyright © 2011-2022 走看看