首先我们在页面上放置三个筛选类和筛选结果.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仿淘宝网商品属性多条件查询,js
jquery仿淘宝SKU选择商品属性代码,模拟淘宝SKU添加商品属性组合
jquery实现的类似淘宝sku选择,宝贝库存、颜色等属性源码,亲测可用!
jQuery仿淘宝商品多规格SKU,自动生成表格表单,jQuery仿淘宝SKU选择商品属性代码
jquery仿淘宝SKU选择商品属性代码.zip
采用自定义RadioGroup实现流式布局(自适应宽度、自动换行) 1、RadioGroup轻松实现商品属性的单选功能 2、若要实现多选功能,则只需要将RadioButton更换为CheckBox并重设点击事件即可
商城属性选择联动
jQuery仿淘宝商品发布动态生成SKU表格实例代码,一款非常实用的商城商品生成SKU表格代码,还可以自定义sku属性。
代码片段: </div>
jQuery淘宝商品列表多条件查询是一款仿淘宝购物的商品列表页面多条件查询筛选商品种类特效代码。
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料,学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素....
需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且...
仿淘宝、京东等商城,利用getJson+ashx实现前后台数据交互,再配上jQuery实现商品属性选择,即同一商品,点击选择不同属性,实时显示不同图片、价格、库存等信息。此实例仅实现前台商品属性选择功能,不包含商品属性...
动态实时生成产品分类电子表格jQuery插件下载。一款仿淘宝动态生成SKU表格实例js特效插件。可自定义添加商品SKU属性。价格和库存点击输入。
jquery仿淘宝SKU选择商品属性代码是一款基于jquery实现的类似淘宝宝贝库存颜色等属性添加特效代码
仿淘宝、京东等商城,利用AjaxPro2实现前后台数据交互,再配上jQuery实现商品属性选择,即同一商品,点击选择不同属性,实时显示不同图片、价格、库存等信息。此实例仅实现前台商品属性选择功能,不包含商品属性后台...
YiiPin是一款精仿《美丽说》网站的社会化购物分享系统程序,让您轻松拥有一个媲美《美丽说》、《蘑菇街》等网站的淘宝客网站,并且支持当当联盟、拍拍客联盟等十几家购物网站商品抓取分享。 系统采用了当下最...
笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此...
6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...