您的位置：首页 > Web前端 > JavaScript

JS实现商品筛选（2）

2014-02-19 20:37 267 查看
在（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，没能以面向对象的思维来写。当然在后面我会一步步地整理出来的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航