jQuery多项条件筛选代码 筛选参数特效

2222.png

html结构：

<div class="select-con">
                <dl id="select1" class="searchLabel clearfix">
                    <dt class="bg2">价格:</dt>
                    <dd class="select-all selected"><a href="javascript:" class="search_search_click " rel="nofollow">不限</a></dd>
                    <dd class=""><a rel="nofollow" href="javascript:" class="preventdefault" title="">2500元以内</a></dd>
                    <dd class=""><a rel="nofollow" href="javascript:" class="preventdefault" title="">2500-3000元</a></dd>
                    <dd class=""><a rel="nofollow" href="javascript:" class="preventdefault" title="">3000-5000元</a></dd>
                    <dd class=""><a rel="nofollow" href="javascript:" class="preventdefault" title="">5000-8000元</a></dd>
                    <dd class=""><a rel="nofollow" href="javascript:" class="preventdefault" title="">8000元以上</a></dd>
                </dl>
            </div>
            <div class="select-con">
            <dl id="select2" class="searchLabel">
                <dt class="bg3">品级:</dt>
                <dd class="select-all selected">
                    <a href=" #/zl_/jia_" rel="nofollow">不限</a>
                </dd>
                <dd class="">
                    <a rel="nofollow" id="1" href="javascript:" title="" class="preventdefault">宠物级</a>
                </dd>
                <dd class="">
                    <a rel="nofollow" id="2" href="javascript:" title="" class="preventdefault">血统级</a>
                </dd>
                <dd class="">
                    <a rel="nofollow" id="3" href="javascript:" title="" class="preventdefault">赛级</a>
                </dd>
            </dl>
        </div>
        <div class="select-con">
            <dl id="select3" class="searchLabel">
                <dt class="bg3">月龄:</dt>
                <dd class="select-all selected"><a href="javascript:" rel="nofollow">不限</a></dd>
                <dd class=""><a rel="nofollow" href="javascript:" title="" class="preventdefault">2月龄以内</a></dd>
                <dd class=""><a rel="nofollow" href="javascript:" title="" class="preventdefault">2-3月龄</a></dd>
                <dd class=""><a rel="nofollow" href="javascript:" title="" class="preventdefault">3-6月龄</a></dd>
                <dd class=""><a rel="nofollow" href="javascript:" title="" class="preventdefault">6月龄以上</a></dd>
            </dl>
        </div>

jquery代码： $(this).addClass("selected").siblings().removeClass("selected");

$(function(e) {

       
        // 切换卡(消息、我的订单)
        jQuery("#select1 dd").bind("click", function(e) {
            $(this).addClass("selected").siblings().removeClass("selected");
            var data_toggle = this.innerText;
            console.log('data_toggle',data_toggle);

        });

        jQuery("#select2 dd").bind("click", function(e) {
            $(this).addClass("selected").siblings().removeClass("selected");
            var data_toggle = this.innerText;
            console.log('data_toggle',data_toggle);
            //$(this).children("a")
            console.log('e', e.target.id);
            let tempLevel = e.target.id;
            level = Number(tempLevel)
            loadDog();
        });

        jQuery("#select3 dd").bind("click", function(e) {
            $(this).addClass("selected").siblings().removeClass("selected");
            var data_toggle = this.innerText;
            console.log('data_toggle',data_toggle);
        });
    })