zoukankan      html  css  js  c++  java
  • JS小功能系列9商品筛选

    <!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;
                 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 {
                 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) {
                 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 {
                 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>

     

  • 相关阅读:
    vmware ubuntu 异常关机无法连接到网络
    Speed up GCC link
    常用的一些解压命令
    Log4j 漏洞复现
    Test Case Design method Boundary value analysis and Equivalence partitioning
    CCA (Citrix Certified Administrator) exam of “Implementing Citrix XenDesktop 4”
    What is Key Word driven Testing?
    SAP AGS面试小结
    腾讯2013终端实习生一面
    指针的引用
  • 原文地址:https://www.cnblogs.com/xingkongly/p/7672543.html
Copyright © 2011-2022 走看看