<!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">上衣&nbsp;:</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">裤装&nbsp;:</span>
                    <span class="active">全部</span>
                    <span>牛仔裤</span>
                    <span>小脚铅笔裤</span>
                    <span>休闲裤</span>
                    <span>打底裤</span>
                    <span>哈伦裤</span>
                </li>
                <li class="li3">
                    <span class="section3">裙装&nbsp;:</span>
                    <span class="active">全部</span>
                    <span>连衣裙</span>
                    <span>半身裙</span>
                    <span>长袖连衣裙</span>
                    <span>中长连衣裙</span>
                </li>


            </ul>
            <div class="condition">
                <div>已选条件&nbsp;:</div>
                <div class="show">暂时没有选择过滤条件</div>

                <div></div>
            </div>

        </div>
    </div>

</body>

</html>