JS实现商品筛选（2）

最新推荐文章于 2021-01-30 18:45:53 发布

lhw135864

最新推荐文章于 2021-01-30 18:45:53 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签：商品筛选

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在（1）中，我们已经知道了怎样把元素选择出来，并且加到已选择的DIV中去。不过那样的方式并不是适合多个搜索条件，并且把相关商品给搜索出来。让我们来重新思考这样的一个需求吧。

先贴一个HTML代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}/*此为偷懒写法*/
        body{background:#fff;font:14px/1.5 "宋体",Arial;}
        .contain{margin: 50px 0 0 100px;}
        .fl{float:left;display:inline;}
        .clearfix{zoom:1;}
        .clearfix:after{content:'';display:table;clear:both;}
        .nav li{float:left;display:inline;width:100px;height:20px;background:red;color:#fff;margin-right:10px;text-align:center;cursor:pointer;}
        .nav .item{margin-top:10px;}
        .nav p{margin-right:20px;}
        .contain .choose{margin-top:20px;}
        .contain .wordbox{float:left;display:inline;margin-right:10px;}
        .contain .wordbox .word{display:inline-block;margin-right:5px;}
        .contain .wordbox .close{cursor:pointer;}
    </style>
</head>
<body>
<div class="contain">
    <div id="nav" class="nav">
        <div class="item clearfix">
            <p class="fl">按品类</p>
            <ul class="fl">
                <li cate="categories">女包</li>
                <li cate="categories">男包</li>
                <li cate="categories">功能包</li>
                <li cate="categories">旅行包</li>
            </ul>
        </div>
        <div class="item clearfix">
            <p class="fl">按风格</p>
            <ul class="fl">
                <li cate="style">日韩</li>
                <li cate="style">欧美</li>
                <li cate="style">甜美</li>
            </ul>
        </div>
        <div class="item clearfix">
            <p class="fl">按材质</p>
            <ul class="fl">
                <li cate="material">牛皮</li>
                <li cate="material">PU</li>
                <li cate="material">PVC</li>
                <li cate="material">ABS</li>
                <li cate="material">帆布</li>
            </ul>
        </div>
    </div>
    <p id="choose" class="choose clearfix"><span class="fl">您已选择：</span></p>
</div>
</body>
</html>

大家可以注意到的是我给每一个不同的搜索条件的li加了cate属性值，相同的cate表示同一类的搜索条件，一般来说，这些搜索条件，一行只能选择一个，不可能多个选中。

回想以前的知识点，我们很自然的就想到了object，代码如下：

var obj = {"a":"2"};
obj = {"a":"3"};
console.dir(obj);

也就是说相同的key值，不同的value值，后者会替换前者，那么接下来的事件就比较容易了。我们只需要创建这样的一个obj，并且维护这个obj对象，就行了。拼接字符到“您已选择”这个容器，包括筛选商品，都由这个obj来进行操控。代码简单如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}/*此为偷懒写法*/
        body{background:#fff;font:14px/1.5 "宋体",Arial;}
        .contain{margin: 50px 0 0 100px;}
        .fl{float:left;display:inline;}
        .clearfix{zoom:1;}
        .clearfix:after{content:'';display:table;clear:both;}
        .nav li{float:left;display:inline;width:100px;height:20px;background:red;color:#fff;margin-right:10px;text-align:center;cursor:pointer;}
        .nav .item{margin-top:10px;}
        .nav p{margin-right:20px;}
        .contain .choose{margin-top:20px;}
        .contain .wordbox{float:left;display:inline;margin-right:10px;}
        .contain .wordbox .word{display:inline-block;margin-right:5px;}
        .contain .wordbox .close{cursor:pointer;}
    </style>
 </head>
<body>
<div class="contain">
    <div id="nav" class="nav">
        <div class="item clearfix">
            <p class="fl">按品类</p>
            <ul class="fl">
                <li cate="categories">女包</li>
                <li cate="categories">男包</li>
                <li cate="categories">功能包</li>
                <li cate="categories">旅行包</li>
            </ul>
        </div>
        <div class="item clearfix">
            <p class="fl">按风格</p>
            <ul class="fl">
                <li cate="style">日韩</li>
                <li cate="style">欧美</li>
                <li cate="style">甜美</li>
            </ul>
        </div>
        <div class="item clearfix">
            <p class="fl">按材质</p>
            <ul class="fl">
                <li cate="material">牛皮</li>
                <li cate="material">PU</li>
                <li cate="material">PVC</li>
                <li cate="material">ABS</li>
                <li cate="material">帆布</li>
            </ul>
        </div>
    </div>
    <div id="choose" class="choose clearfix fl"><span class="fl">您已选择：</span><div id="choosebox" class="fl"></div></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    (function(){
        var chooseobj = {};
        //var newarr = [];
        var oli = $(".nav li");
        var ochoose = $("#choosebox");
        oli.each(function(i,oitem){
            oitem.onclick = function(){
               var oword = $(".word");
               chooseobj[this.getAttribute("cate")] = this.innerHTML;
               createChooseResult(chooseobj,ochoose[0]);
             }
        });
        function createChooseResult(obj,contain){
            //console.dir(obj);
            contain.innerHTML = "";
            var str = "";
            for(var i in obj){
                str += "<div class='wordbox'><span cate="+i+" class='word'>"+obj[i]+"</span><span class='close'>×</span></div>";
            }
            contain.innerHTML = str;
        }
        $(".close").live("click",function(){
            var key = $(this).prev().attr("cate");
            delete chooseobj[key];
            this.parentNode.parentNode.removeChild(this.parentNode);
        })
    })();
</script>
</body>
</html>

这个代码的不足点在于关闭这一块的功能，是按照节点来的，也就是说结构尽量和我的统一，或者只要和我的结构保持层级相同一致即可。

另外，代码还是充斥着大量的function，没能以面向对象的思维来写。当然在后面我会一步步地整理出来的。