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实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery实现简单评论区功能
Oct 26 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
极典R601SW收音机
2021/03/02 无线电
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python中方法链的使用方法
2016/02/23 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python实现定时发送qq消息
2019/01/18 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
python 绘制正态曲线的示例
2020/09/24 Python
介绍一下游标
2012/01/10 面试题
linux面试题参考答案(8)
2015/08/11 面试题
优秀企业获奖感言
2014/02/01 职场文书
大学军训感想
2014/02/12 职场文书
村级四风对照检查材料
2014/08/24 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
委托书英文
2015/01/28 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书