仿京东超市多条件筛选（jquery实现），欢迎前来拍砖

仿京东商城多条件筛选（jquery实现），欢迎前来拍砖！
闲来无事，想做一个类似京东商城那种多条件筛选效果，京东效果如下：
仿京东超市多条件筛选（jquery实现），欢迎前来拍砖

由于对jquery的不熟悉，短短几行代码写了一上午。惭愧。

另外，对jquery体会最深的一点是，可以通过很多种方法达到同样的显示效果，但是本质却有着非常大的区别。例如：
通过".attr('class', 'seled')"和".addClass('seled')"都可以为选中的对象添加样式，并且达到同样的显示效果，但是这两种添加样式的方法在"$("#filter a[class='seled']")"眼中却是不一样的。

废话不多说，上代码。

对了，由于不是美工，所以测试方面没怎么在意，我选择用的都是高版本的浏览器，Chrome 13.0.782.107 m、Firefox 5.0、IE9


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;title&gt;360buy多条件筛选&lt;/title&gt;
    &lt;style type="text/css"&gt;
        #filter
        {
        width:620px;
        height:auto;
        margin-left:auto;
        margin-right:auto;
        font-size:12px;
        }
        
        #filter dl
        {
        padding:0;
        margin-top:0;
        margin-bottom:0;
        clear:both;
        padding:4px 0;        
        }
        
        #filter dt,dd
        {
        display:block;
        float:left;
        width:auto;
        padding:0;
        margin:3px 0;               
        }
        
        #filter dt
        {
        height:14px;
        padding-bottom:4px;
        font-weight:bold;
        color:#333333;        
        }
        
        #filter dd
        {
        color:#005AA0;
        margin-right:8px;
        }
        
        #filter a
        {
        cursor:pointer;
        }
         
 
        .seling
        {
            background-color:#005AA0;
        color:#FFFFFF;
        }
        
        .seled
        {
        background-color:#005AA0;
        color:#FFFFFF;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="filter"&gt;
        &lt;dl&gt;
            &lt;dt&gt;品牌：&lt;/dt&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;全部&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;惠普(hp)&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;联想(Lenovo)&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;联想(ThinkPad)&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;宏基(acer)&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;华硕&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;戴尔&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;三星&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;索尼&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;东芝&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;Gateway&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;微星&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;海尔&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;清华同方&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;富士通&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;苹果(Apple)&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;神舟&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;方正&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;优雅&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
        &lt;/dl&gt;
        &lt;dl&gt;
            &lt;dt&gt;价格：&lt;/dt&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;全部&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt; 
 
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;1000-2999&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;3000-3499&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;3500-3999&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;4000-4499&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;4500-4999&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;5000-5999&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;6000-6999&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;7000-9999&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;10000以上&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
        &lt;/dl&gt;
        &lt;dl&gt;
            &lt;dt&gt;尺寸：&lt;/dt&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;全部&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;8.9英寸及以下&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;11英寸&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;12英寸&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;13英寸&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;14英寸&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;15英寸&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;16英寸-17英寸&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
        &lt;/dl&gt;
        &lt;dl&gt;
            &lt;dt&gt;平台：&lt;/dt&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;全部&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;AMD Brazos APU平台&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;Intel Sandy Bridge平台&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;Intel平台&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;AMD平台&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
        &lt;/dl&gt;
        &lt;dl&gt;
            &lt;dt&gt;显卡：&lt;/dt&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;全部&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt; 
 
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;独立显卡&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;集成显卡&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;div&gt;&lt;a&gt;核芯显卡&lt;/a&gt;&lt;/div&gt;&lt;/dd&gt;            
        &lt;/dl&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


&lt;script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(function () {
        //选中filter下的所有a标签，为其添加hover方法，该方法有两个参数，分别是鼠标移上和移开所执行的函数。
        $("#filter a").hover(
            function () {
                $(this).addClass("seling");
            },
            function () {
                $(this).removeClass("seling");
            }
        );


        //选中filter下所有的dt标签，并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
        $("#filter dt+dd a").attr("class", "seled"); /*注意：这儿应该是设置(attr)样式，而不是添加样式(addClass)，
                                                      不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/       

        //为filter下的所有a标签添加单击事件
        $("#filter a").click(function () {
            $(this).parents("dl").children("dd").each(function () {
                $(this).children("div").children("a").removeClass("seled");
            });

            $(this).attr("class", "seled");

            alert(RetSelecteds()); //返回选中结果
        });
        alert(RetSelecteds()); //返回选中结果
    });

    function RetSelecteds() {
        var result = "";
        $("#filter a[class='seled']").each(function () {
            result += $(this).html()+"\n";
        });
        return result;
    }
&lt;/script&gt;

另外，还有一些疑问，请大家帮忙解答：
请结合html看看下面代码：
$(this).parents("dl").children("dd").each(function () {
$(this).children("div").children("a").removeClass("seled");
});

$(this)获取到的是a标签，通过.parents()方法和提供的"dl"参数，可以访问到a标签的父节点的父节点……，那为什么没有childrens()方法呢（注意后面跟了s）？还有看看这行代码，$(this).children("div").children("a").removeClass("seled");简直丑死了，用了几个children()方法，有人能将上面一段代码帮我改改吗？？

谢了！

[解决办法]
不错不错~顶下~
[解决办法]
$(this).find("a").removeClass("seled");

直接用find就可以吧~
[解决办法]
只是样式的东西不太是我想要的..
[解决办法]
不错哦！
[解决办法]
原来只是个前台效果....
[解决办法]
仿京东超市多条件筛选（jquery实现），欢迎前来拍砖

谢谢分享
[解决办法]
路过.....
[解决办法]
顶个蹭分分！
[解决办法]
楼主的精神值得提倡！学习！顶
[解决办法]
呵呵，不错，up
[解决办法]
可以啦，不错
[解决办法]
没用个ajax
~~~~~来学习

仿京东超市多条件筛选（jquery实现）

热点推荐