JS仿淘宝条件筛选特效

Html

Css

Js

已选择:
    

aside { overflow:hidden } div { display:inline-block; margin-top:15px; } i { font-size:14px; color:#666; font-style:normal; } span { display:inline-block; width:55px; height:24px; text-decoration:none; color:#039; border-radius:2px; font-size:14px; line-height:24px; text-align:center; } span:hover { cursor:pointer; } .mystyle { color:#f60; background-color:#f3edc2; } .last { float:left; color:#666; font-size:14px; margin-top:20px; } #yi { display:inline-block; } #yi span { margin-left:10px; color:#f60; background-color:#f3edc2; }

var oDivLength = []; var div = document.getElementsByTagName('div'); var divSpan = document.getElementsByTagName('span'); //判断有几个列表 for (var i = 0; i < div.length; i++) { div[i].index = i; } for (var i = 0; i < divSpan.length; i++) { divSpan[i].onclick = function() { oDivLength[this.parentElement.index] = this.innerText; var oChild = this.parentElement.children; for (var j = 0; j < oChild.length; j++) { oChild[j].className = ''; } this.className = 'mystyle'; //已选中的当前列的当前元素添加样式 document.getElementById('yi').innerHTML = ''; for (var m = 0; m < oDivLength.length; m++) { //放到已选择里面 if (oDivLength[m] == '' || oDivLength[m] !== undefined) { var para = document.createElement("span"); var node = document.createTextNode(oDivLength[m]); para.appendChild(node); document.getElementById('yi').appendChild(para); } } } }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

有三个筛选条件，每次每中一个会在下方已选择中显示出你所选择的元素，点击当前行的其它元素会在相当位置替换掉原来选择的元素。可以任意增加div组合的行数及每行中元素的个数。不用修改js.