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