jQuery仿淘宝商品多属性查询

这是一款jQuery的商品属性多条件查询插件，和淘宝商城的条件查询类似，可以多条件查询，也可以删除某一个条件。

分类：表单代码 > 筛选难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先我们在页面上放置三个筛选类和筛选结果.select-result：

<ul class="select" id="ul_select">
    <li class="select-list">
        <dl id="select1" class="dl">
            <dt>上装：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">针织衫</a></dd>
            <dd><a href="#">毛呢外套</a></dd>
            <dd><a href="#">T恤</a></dd>
            <dd><a href="#">羽绒服</a></dd>
            <dd><a href="#">棉衣</a></dd>
            <dd><a href="#">卫衣</a></dd>
            <dd><a href="#">风衣</a></dd>
        </dl>
    </li>
    <li class="select-list">
        <dl id="select2" class="dl">
            <dt>裤装：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">牛仔裤</a></dd>
            <dd><a href="#">小脚/铅笔裤</a></dd>
            <dd><a href="#">休闲裤</a></dd>
            <dd><a href="#">打底裤</a></dd>
            <dd><a href="#">哈伦裤</a></dd>
        </dl>
    </li>
    <li class="select-list">
        <dl id="select3" class="dl">
            <dt>裙装：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">连衣裙</a></dd>
            <dd><a href="#">半身裙</a></dd>
            <dd><a href="#">长袖连衣裙</a></dd>
            <dd><a href="#">中长款连衣裙</a></dd>
        </dl>
    </li>
    <li class="select-result">
        <dl id="dl_result">
            <dt>已选条件：</dt>
            <dd class="select-no">暂时没有选择过滤条件</dd>
        </dl>
    </li>
</ul>

jQuery

首先我们给每个属性分类绑定事件：

$("#ul_select").find(".dl").children("dd").click(function() { //每个商品分类行绑定点击事件
    $(this).addClass("selected").siblings("dd").removeClass("selected"); //当前元素选中，其余删除选中样式
    var index = $(this).parents(".select-list").index(); //获取父级索引index
    var goods = $(this).children("a").text(); //获取当前商品名称
    $("#select_" + index).remove(); //删除当前索引的筛选
    if (goods != '全部') { //若不是全部 在筛选区域添加商品
        $("#dl_result").append("<dd id='select_" + index + "' class='selected' onclick=removeChose($(this),'" + index + "')><a href='#'>" + goods + "</a></dd>");
    }
    getResult();
})

然后我们看下里面的removeChose(obj, index)方法，第一个参数是当前对象，第二个参数是当前要删除的分类索引：

function removeChose(obj, index) { //删除筛选
    $("#ul_select").children(".select-list").eq(index).find(".selected").removeClass("selected"); //删除商品选中样式
    $("#ul_select").children(".select-list").find("dd").eq(0).addClass("selected"); //给全部添加选中样式
    obj.remove(); //当前按钮删除
    getResult();
}

再看下getResult() 筛选后的结果函数：

function getResult() { //结果处理
    var len_chose = $("#dl_result").children(".selected").length;
    if (len_chose > 0) { //若是筛选区域选中项大于0
        $(".select-no").hide(); //暂时没有选择过滤条件 隐藏
    } else {
        $(".select-no").show(); //暂时没有选择过滤条件 显示
    }
}