JS实现商品筛选（1）

最新推荐文章于 2022-05-30 18:03:27 发布

lhw135864

最新推荐文章于 2022-05-30 18:03:27 发布

阅读量4.8k

点赞数

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

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在电子商务的页面中，这个功能还是比较常见的。不过呢，通常点击类别，都是发ajax请求，然后回调数据，再把数据插入到相应的容器中。我今天要分享的东西，有点特殊，就是在页面中，已经得到全部商品的JSON数据，在没有选择类别的情况下，显示全部的数据，选择类别后，显示对应的数据。还是先来看一下截图吧：

这里的功能，除了可以看到的之外，还有一个分页的功能。这个代码，我昨天晚上在同事的基础上进行重构，最后还是没能用面向对象的思维来完成，只是以她的思路用函数完成功能而已。原因主要是时间太仓促，而且大晚上的，一天下来累的已经不行。因此有了这篇文章，一方面督促自己完成，一方面也算给其他同事一个好的思路吧。

鉴于现在比较晚了，我们先实现一个简单的，就是点击某个类别，下面已选择那里会新增类别，同时已选择那里的类别也可以删除掉。为了方便起见，我就用其他更简单的东西来代替上面的写法，毕竟上面的写法样式什么的，要写一堆，甚是不爽。

用jquery写的一个小例子，DEMO如下：

<!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;}
        .contain p{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">
    <ul id="nav" class="nav clearfix">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
    <p id="choose" class="clearfix"><span class="fl">您已选择：</span></p>
</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 oli = $(".nav li");
        var ochoose = $("#choose");
        oli.each(function(i,oitem){
            oitem.onclick = function(){
               var oword = $(".word");
               for(var i = 0;i<oword.length;i++){
                   if(oword[i].innerHTML == this.innerHTML){
                        alert("您已经添加该元素，不能再继续添加！");
                        return;
                   }
               }
               ochoose[0].innerHTML += "<div class='wordbox'><span class='word'>"+this.innerHTML+"</span><span class='close'>×</span></div>"
            }
        });
        $(".close").live("click",function(){
            this.parentNode.parentNode.removeChild(this.parentNode);
        })
    })();
</script>
</body>
</html>

也没什么难点，就是关闭这个按钮，是需要后期来绑定的，因此用了live方法。老实说小张的jquery并不是太合格，因为在jquery里面也大量充斥着原生，有时候真忘了该怎样写。有时候还是要总结下这些东西吧