最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery仿淘宝商品多属性查询

来源:http://www.erdangjiade.com/ 二当家的 2015-05-20 07:42浏览(1544)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

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

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2