JS实现商品筛选（2）

来源：互联网发布：windows活动目录的功能编辑：程序博客网时间：2024/04/28 18:38

在（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，没能以面向对象的思维来写。当然在后面我会一步步地整理出来的。

0 0