最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery仿淘宝商品多属性查询

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-20 07:42浏览(1662)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery仿淘宝商品多属性查询
分类:表单代码 > 筛选 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

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(); //暂时没有选择过滤条件 显示
    }
}
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/126.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2