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);
        });
    })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,466评论 0 44
  • jQuery知识点 1 基础知识 jQuery API网站:jQuery库网站 知识点解读原生JS与jQuery代...
    果木山阅读 199评论 0 0
  • 第一章 认识jQuery jQuery 能做什么 1. 取得文档中的元素 2. 修改页面的外观 CSS虽然为影响文...
    七弦桐语阅读 498评论 0 1
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,618评论 0 11
  • 我在围城啊 你在临行前的北方 我是算好半岛时间的摆钟 我在北方啊 你在望不见的彼岸 我是臆想半岛风光的旅人 你是三...
    程诚〇阅读 409评论 0 1