商品筛选条件

需求：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]);
					}
				}
			}
		}
	}
}