JS商品筛选列表,有点击叉子删除
PublishedCreated: 2017年12月24日星期日 上午11:29:53 views(1942)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="./CS/common.css" rel="stylesheet"> <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } li { list-style-type: none; } .l { float: left; } .r { float: right; } .c:after { clear: both; width: 0; height: 0; font-size: 0; content: ""; display: block; visibility: hidden; } body { font-size: 12px; } body .wrap { margin: auto; } .active { background: #FF5722; color: #fff!important; box-shadow: 1px 1px 3px orange; } #head .wrap { width: 600px; height: 300px; border: 1px solid #aaa; padding: 0px 10px; } .wrap ul li { padding: 10px 0px; border-bottom: 1px dotted #aaa; } .wrap ul li span { display: inline-block; color: blue; } .wrap ul li span:nth-of-type(1) { width: 100px; text-align: right; color: #aaa; } .wrap ul li span:nth-of-type(1)~span { padding: 3px 5px; margin: 0px 5px; } .condition { padding: 10px 0px; } .condition div { display: inline-block; text-align: right; padding: 3px 5px; margin-right: 10px; } .condition div:first-of-type { width: 100px; } .condition div span:first-of-type { margin-right: 5px; } </style> <!-- <script src="../jquery-1.7.2/jquery.js"></script> <script> $(document).ready(function () { $(".wrap ul li").each(function (i) { $(".wrap ul li").eq(i).children("span").each(function (k) { $(this).click(function () { //给当前元素添加样式，其他兄弟删除样式 $(this).addClass("activeColor").siblings().removeClass("activeColor"); //记录是哪一行li[i是li的索引，是唯一标识] var choice = ".choice" + (i + 1); //删除已存在的元素 $(choice).remove(); //全部的索引是1，点击全部时，1>1 返回false，不添加元素 if (k > 1) { //添加元素 var div = "<div class='choice" + (i + 1) + " activeColor'><span>" + $(this).clone().html() + "</span><span class='deleteBtn'>" + "X</span></div>" $(".condition").append(div); } }); }); }); //on委托事件，给现在没有存在的元素添加事件 $(".condition").on("click", ".deleteBtn", function () { $(this).parent().remove(); var arr=$(this).parent().attr("class").split(" "); // console.log(arr[0]); // console.log(arr[0].trim().slice(arr[0].length-1,arr[0].length)); var i=arr[0].trim().slice(arr[0].length-1,arr[0].length); $(".wrap ul li").eq(i-1).children("span").eq(1).addClass("activeColor").siblings().removeClass("activeColor"); }) }); </script> --> <script> window.onload = function () { var condition = document.querySelector(".condition"), showDiv = document.querySelectorAll(".show~div"), conditionSpan = document.querySelectorAll(".condition span"), wrapLi = document.querySelectorAll(".wrap ul li"), fork = document.querySelectorAll(".fork"), wrapSpan = document.querySelectorAll(".wrap ul li span"), index = 0, number = 0; for (var i = 0, len = wrapLi.length; i < len; i++) { wrapLi[i].index = i; wrapLi[i].flag = false; for (var j = 0, len2 = wrapLi[i].children.length; j < len2; j++) { wrapLi[i].children[j].index2 = j; wrapLi[i].children[j].onclick = function () { var choice = "choice" + (this.parentNode.index + 1); var choose = document.querySelector("." + choice); //添加样式 for (var k = 0, len2 = this.parentNode.children.length; k < len2; k++) { if (this.index2 != k) this.parentNode.children[k].className = ""; } this.className = "active"; //改变内容 this.index2>1是上衣，全部【因为flag所以必须放在添加内容代码之前】 if (this.parentNode.flag && this.index2 > 1) { choose.children[0].innerHTML = this.innerHTML; // console.log(this.parentNode.flag ) // console.log(choose.children[0].innerHTML) } //添加html，内容属性样式 this.index2>1是上衣，全部 if (!this.parentNode.flag && this.index2 > 1) { var div = document.createElement("div"); var span1 = document.createElement("span"); var span2 = document.createElement("span"); var text1 = document.createTextNode(this.innerHTML); var text2 = document.createTextNode("X"); span1.appendChild(text1); span2.appendChild(text2); div.appendChild(span1); div.appendChild(span2); div.setAttribute("class", "active " + choice); span2.setAttribute("class", "fork"); condition.appendChild(div); this.parentNode.flag = true; } //点击全部 删除过滤条件 if (this.index2 == 1) { condition.removeChild(choose); this.parentNode.flag = false; } } } } //点击叉子删除 for (var i = 0, len = fork.length; i < len; i++) { fork[i].addEventListener("click", function () { console.log(this.parentNode.index); condition.remove(this.parentNode); }); } } </script> </head> <body> <div id="head"> <div class="wrap"> <span class="fork">R</span> <ul> <li class="li1"> <span class="section1">上衣 :</span> <span class="active">全部</span> <span>针织衫</span> <span>毛呢外套</span> <span>T恤</span> <span>羽绒服</span> <span>棉衣</span> <span>卫衣</span> <span>风衣</span> </li> <li class="li2"> <span class="section2">裤装 :</span> <span class="active">全部</span> <span>牛仔裤</span> <span>小脚铅笔裤</span> <span>休闲裤</span> <span>打底裤</span> <span>哈伦裤</span> </li> <li class="li3"> <span class="section3">裙装 :</span> <span class="active">全部</span> <span>连衣裙</span> <span>半身裙</span> <span>长袖连衣裙</span> <span>中长连衣裙</span> </li> </ul> <div class="condition"> <div>已选条件 :</div> <div class="show">暂时没有选择过滤条件</div> <div></div> </div> </div> </div> </body> </html> .