`
hjl416148489
  • 浏览: 22091 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

jQuery仿淘宝商品多属性查询

阅读更多

首先我们在页面上放置三个筛选类和筛选结果.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>

首先我们给每个属性分类绑定事件:
$("#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(); //暂时没有选择过滤条件 显示 
    } 
}

商品多属性查询演示http://www.sucaihuo.com/js/126.html
分享到:
评论

相关推荐

    jQuery仿淘宝网商品属性多条件查询

    本项目“jQuery仿淘宝网商品属性多条件查询”旨在实现与淘宝网类似的商品搜索功能,允许用户根据多种属性进行筛选,提高用户体验。通过这个实践,我们可以学习到如何利用jQuery和JavaScript来构建一个动态的、交互性...

    jquery仿淘宝商城选择商品尺寸与大小颜色功能.zip

    本示例"jquery仿淘宝商城选择商品尺寸与大小颜色功能"是一个实现此类功能的实践案例,它利用jQuery库来创建一个类似淘宝的商品选择系统,允许用户动态地选择商品的尺寸、颜色,并实时更新商品的价格。 首先,`index...

    jquery仿淘宝SKU选择商品属性代码

    这个"jquery仿淘宝SKU选择商品属性代码"是针对电商网站商品管理的一种常见功能实现,它允许用户根据商品的不同属性(如颜色、尺寸、材质等)进行选择,以便展示正确的库存和价格信息。下面我们将深入探讨相关的知识...

    jquery仿淘宝SKU选择商品属性代码.rar

    综上所述,"jquery仿淘宝SKU选择商品属性代码"是一个实现商品属性选择功能的实例,涵盖了前端交互设计、数据处理和用户体验优化等多个方面。通过学习和理解这段代码,开发者可以更好地掌握jQuery在电商场景中的应用...

    jQuery仿淘宝主图视频切换代码.zip

    《jQuery仿淘宝主图视频切换代码详解》 在网页设计中,吸引用户的注意力并提供良好的用户体验至关重要。"jQuery仿淘宝主图视频切换代码"是一个高效且美观的解决方案,它能够帮助开发者实现类似淘宝主页的商品主图...

    jquery仿淘宝商城选择商品尺寸与大小颜色功能

    本项目"jquery仿淘宝商城选择商品尺寸与大小颜色功能"旨在模拟淘宝商城的商品选购流程,提供用户友好的交互体验。下面将详细介绍这个项目中的关键知识点。 1. **jQuery库的运用**: - jQuery的核心功能是通过简洁...

    jQuery仿淘宝商品发布选择分类代码

    总的来说,“jQuery仿淘宝商品发布选择分类代码”项目涉及了前端开发中的多个重要技术,包括jQuery操作DOM、事件处理、Ajax通信、CSS3动画以及响应式设计等,对于理解电商平台的交互设计和提升用户体验具有很好的...

    Jquery仿淘宝顶部导航菜单

    【jQuery仿淘宝顶部导航菜单】是一种常见的网页设计技术,它主要使用JavaScript库jQuery来实现类似淘宝网站顶部导航栏的交互效果。这个项目旨在提供一种高效、动态且用户体验良好的导航菜单解决方案,让访客能够轻松...

    jquery仿淘宝商城商品图片预览选择代码

    以上是实现"jquery仿淘宝商城商品图片预览选择代码"所需的关键步骤和技术。通过这个功能,用户可以在不离开当前页面的情况下方便地浏览和选择商品图片,提高了浏览效率和满意度。在实际开发中,还可以根据需求增加更...

    jQuery版仿淘宝商城天猫首页.rar

    《jQuery版仿淘宝商城天猫首页》是一个基于jQuery技术实现的前端项目,旨在为开发者提供一个简单易用的模板,用于创建类似淘宝商城天猫首页的网页布局和交互效果。这个项目的特点在于,它只需要引入jQuery库就能运行...

    仿淘宝商城焦点图的jQuery效果

    总的来说,仿淘宝商城焦点图的jQuery效果是通过结合DOM操作、事件处理、动画效果和数据管理等多种技术实现的,它为用户提供了一种动态且交互性强的图片展示体验。如果你想要在自己的网站上实现类似的效果,理解并...

    仿淘宝SUK商城属性选择动态联动

    "仿淘宝SUK商城属性选择动态联动"这个项目就是针对这一技术的一个实例。在这个项目中,我们将会探讨如何使用jQuery库来实现商品属性之间的联动效果,使得用户在选择某一属性时,其他相关属性能够实时更新,提供更为...

    Jquery仿淘宝左右上下两种图片轮播效果

    总结来说,"Jquery仿淘宝左右上下两种图片轮播效果"涵盖了jQuery基础、CSS动画、DOM操作、事件处理等多个核心知识点,是学习和实践网页动态效果的优秀实例。通过理解和实现这个项目,开发者可以提升对网页交互设计的...

    jquery仿淘宝SKU选择商品属性代码.zip

    这个名为"jquery仿淘宝SKU选择商品属性代码.zip"的压缩包文件提供了一个使用jQuery实现的示例,用于模拟淘宝网站的商品属性选择功能,特别关注了SKU(Stock Keeping Unit,库存量单位)的选择逻辑。 首先,我们需要...

    jQuery仿淘宝图片滚动效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个仿淘宝图片滚动效果,这是一种常见的网页动态展示技术,可以提升用户体验,使网站更具吸引力。首先,我们需要理解jQuery库的基础知识,它是JavaScript的一个轻量级...

    jQuery仿淘宝商品多规格SKU,自动生成表格表单

    本教程将详细讲解如何使用jQuery来实现一个类似于淘宝商品详情页中的多规格SKU(库存保持单位)功能,帮助开发者自动生成表格表单,以便用户在选择商品时能方便地选取不同的属性组合。 首先,我们需要理解SKU的概念...

    jQuery仿淘宝红色分类导航.zip

    本项目"jQuery仿淘宝红色分类导航"是针对网站菜单导航的一种实现,它模仿了淘宝网的左侧多级弹出分类导航菜单效果。这种导航菜单在电子商务网站中尤其常见,因为它能够帮助用户高效地浏览和定位商品。 首先,我们...

    jQuery仿淘宝icon动画图标特效

    《jQuery仿淘宝icon动画图标特效详解》 在网页设计中,动态效果往往能提升用户体验,增强视觉吸引力。本文将深入探讨一款基于jQuery实现的“仿淘宝icon动画图标特效”。这款特效巧妙地运用了jQuery框架,当鼠标悬停...

    jQuery实战之仿淘宝商城左侧导航效果

    在此案例中,我们将探讨如何使用jQuery来实现一个仿淘宝商城左侧导航效果。 首先,从描述中我们可以看到,相比于传统的JavaScript实现,jQuery提供了更为简便和强大的方法来实现相同的页面效果。这一点体现在对DOM...

Global site tag (gtag.js) - Google Analytics