jquery实现商品sku多属性选择功能(商品详情页)


Posted in jQuery onDecember 20, 2019

SKU=Stock Keeping Unit(库存量单位)。即库存进出计量的基本单元,可以是以件,盒,托盘等为单位。

SKU是用来定价和管理库存的,比如一个产品有很多颜色,很多配置,每个颜色和配置的组合都会形成新的产品,这时就产生很多SKU,sku在传统线下行业也是一个非常常用的概念,尤其是服装行业,同款不同尺码不同色都是独立的SKU,需要有独立的条形码,独立的库存管理等。

实现效果

jquery实现商品sku多属性选择功能(商品详情页)

源码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>商品SKU选择DEMO3</title>
</head>
<body>
<style type="text/css">
 ul,li{ padding:0px; margin:0px;}
 #panel{ width:500px; margin:30px auto;}
 .goods_attr{ overflow:hidden;}
 .goods_attr .label {font: 12px/30px '宋体';color: #777;width: 50px;;padding-right: 10px;float: left; display:block;}
 .goods_attr ul {float:left;width:300px;}
 .goods_attr li{color:#333;overflow:hidden;position:relative;float:left;text-align:center; vertical-align:middle; border:1px solid #999;text-indent:0; cursor:pointer}
 .goods_attr li.b{border:1px dotted #CCC;color:#DDD; pointer:none;}
 .goods_attr li.b img {opacity:0.4;}
 .goods_attr li.sel{ border:1px solid #c80a28;color:#333;}
 .goods_attr li.text{margin:5px 10px 5px 0; height:23px;line-height:23px;text-indent:0;padding:0 23px;font-style:normal;}
 .goods_attr li.img{ margin-right:10px;width:35px;height:35px; line-height:35px;text-align:center;}
</style>
<div id="panel">
 <div id="panel_sku_list"><pre></pre></div>
 <div id="panel_sel">
 </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
 var keys = {
 'attr1':['10','11','12'],
 'attr2':['20','21','22','23'],
 'attr3':['30','31','32'],
 'attr4':['40','41']
 };
 //SKU,Stock Keeping Uint(库存量单位)
 var sku_list=[
 {'attrs':'10|20|30|40','num':120},
 {'attrs':'10|21|30|40','num':10},
 {'attrs':'10|22|30|40','num':28},
 {'attrs':'10|22|31|41','num':220},
 {'attrs':'10|22|32|40','num':130},
 {'attrs':'11|23|32|41','num':120},
 {'attrs':'11|22|32|41','num':120},
 {'attrs':'11|22|31|41','num':120},
 {'attrs':'11|22|31|40','num':120},
 {'attrs':'12|22|31|40','num':120},
 ];
 //显示html结构
 function show_attr_item(){
 var html='';
//k是下标,跟php不同
 for(k in keys){
  html+='<div class="goods_attr" > <span class="label">'+k+'</span>';
  html+='<ul>'
  for(k2 in keys[k]){
  _attr_id=keys[k][k2];
  html+='<li class="text" val="'+_attr_id+'" >';
  html+='<span>'+_attr_id+'</span>';
  html+='<s></s>';
  html+='</li>'
  }
  html+='</ul>';
  html+='</div>';
 }
 $('#panel_sel').html(html);
 }
 //显示数据
 function show_data(sku_list){
 var str="";
 for( k in sku_list){
  str+=sku_list[k]['attrs']+"\t"+sku_list[k]['num']+"\n";
 }
 $('#panel_sku_list pre').html(str);
 }
 show_data(sku_list);
 show_attr_item();
 //返回对象中的一个数组,有attr属性
 function filterProduct(ids){
 var result=[];
 $(sku_list).each(function(k,v){
  _attr='|'+v['attrs']+'|';
  _all_ids_in=true;
  for( k in ids){
  if(_attr.indexOf('|'+ids[k]+'|')==-1){
   _all_ids_in=false;
   break;
  }
  }
  //把数组中的id所在那行的所有元素都压入result。最后返回
  if(_all_ids_in){
  result.push(v);
  }
 });
 return result;
 }
 function filterAttrs(ids){
 var products=filterProduct(ids);
//console.log(products);
 var result=[];
 $(products).each(function(k,v){
  //括号内的还是返回一个数组,concat函数是拼接一个或多个函数。
  result=result.concat(v['attrs'].split('|'));
 });
 return result;
 }
 //已选择的节点数组
 function _getSelAttrId(){
 var list=[];
 $('.goods_attr li.sel').each(function(){
  list.push($(this).attr('val'));
 });
 return list;
 }
 //注册点击事件
 $('.goods_attr li').click(function(){
 if($(this).hasClass('b')){
  return ;//被锁定了
 }
 if($(this).hasClass('sel')){
  $(this).removeClass('sel');
 }else{
  $(this).siblings().removeClass('sel');
  $(this).addClass('sel');
 }
 var select_ids=_getSelAttrId();
// console.log(select_ids);
////已经选择了的规格
 var ids=filterAttrs(select_ids);
//如果id不在已选id所在行组成的数组中,则然他禁止点击
 $('#panel_sel').find('li').each(function(k2,li2){
  if($.inArray($(li2).attr('val'),ids)==-1){
  $(li2).addClass('b');
  }else{
  $(li2).removeClass('b');
  }
 });
 });
</script>
</body>
</html>

部分截图展示说明,一个div放置数据,一个放置效果。模拟后台,结构是根据jquery语法动态展示的。

jquery实现商品sku多属性选择功能(商品详情页)

一些jquery语法解释

key是对应动态展示的效果,可以扩展属性值。sku_list是存在的属性组合。

存在的是指,在这里是有attr1,attr2,attr3,attr4(相当于颜色,尺寸,内存,型号)这4种规格,里面有2x4x3x2=48种组合,而实际上售卖的组合只有9种,就是sku__list列出来的。

jquery实现商品sku多属性选择功能(商品详情页)

一些函数说明

这2个函数是动态展示数据和结构,依据是上面图中的2个数组。keys和sku_list

jquery实现商品sku多属性选择功能(商品详情页)

jquery实现商品sku多属性选择功能(商品详情页)

总结

以上所述是小编给大家介绍的jquery实现商品sku多属性选择功能(商品详情页),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现验证用户登录
Dec 10 #jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 #jQuery
jQuery实现消息弹出框效果
Dec 10 #jQuery
jQuery实现弹出层效果
Dec 10 #jQuery
JQuery样式与属性设置方法分析
Dec 07 #jQuery
You might like
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
jquery 图片轮换效果
2010/07/29 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
javascript常用函数(2)
2015/11/05 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
Vue 去除路径中的#号
2018/04/19 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
用Python实现大文本文件切割的方法
2019/01/12 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
python实现拼图小游戏
2020/02/22 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
python模拟斗地主发牌
2020/04/22 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
学校招生宣传广告词
2014/03/19 职场文书
一年级评语大全
2014/04/23 职场文书
团干部培训方案
2014/06/03 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
优秀团队申报材料
2014/12/26 职场文书
情人节单身感言
2015/08/03 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python
spring boot实现文件上传
2022/08/14 Java/Android