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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jquery图片放大镜效果
Jun 23 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现计算器功能
Oct 19 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
jQuery菜单插件用法实例
2015/07/25 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
面试常见的js算法题
2017/03/23 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
js实现京东轮播图效果
2017/06/30 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
基于python实现把图片转换成素描
2019/11/13 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
VC++笔试题
2014/10/13 面试题
企业安全生产目标责任书
2014/07/23 职场文书
基层党员对照检查材料
2014/09/24 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
项目建议书
2015/02/04 职场文书
迎新生晚会主持词
2015/06/30 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle