商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>商品SKU选择DEMO</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_sel">
<div class="goods_attr"><span class="label">attr1</span>
<ul>
<li class="text goods_sku" val="10额"><span>10额</span><s></s></li>
<li class="text goods_sku" val="11">
<span>11</span><s></s></li>
</ul>
</div>
<div class="goods_attr"><span class="label">attr2</span>
<ul>
<li class="text goods_sku" val="20"><span>20</span><s></s></li>
<li class="text goods_sku" val="21"><span>21</span><s></s></li>
<li class="text goods_sku" val="22"><span>22</span><s></s></li>
<li class="text goods_sku" val="23"><span>23</span><s></s></li>
</ul>
</div>
<div class="goods_attr"><span class="label">attr3</span>
<ul>
<li class="text goods_sku" val="30"><span>30</span><s></s></li>
<li class="text goods_sku" val="31"><span>31</span><s></s></li>
<li class="text goods_sku" val="32"><span>32</span><s></s></li>
</ul>
</div>
<div class="goods_attr"><span class="label">attr4</span>
<ul>
<li class="text goods_sku" val="40"><span>40</span><s></s></li>
<li class="text goods_sku" val="41"><span>41</span><s></s></li>
</ul>
</div>
</div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
//SKU，Stock Keeping Uint(库存量单位)
var sku_list = [
{'sku_key': '10额;20;30;40', 'id': 120, 'store_nums': 100, 'sell_price': '10.7'},
{'sku_key': '10额;21;30;40', 'id': 10, 'store_nums': 1540, 'sell_price': '45.7'},
{'sku_key': '10额;22;30;40', 'id': 28, 'store_nums': 150, 'sell_price': '72.7'},
{'sku_key': '10额;22;31;41', 'id': 220, 'store_nums': 1050, 'sell_price': '85.7'},
{'sku_key': '10额;22;32;40', 'id': 130, 'store_nums': 106, 'sell_price': '543.7'},
{'sku_key': '10额;22;32;41', 'id': 135, 'store_nums': 1530, 'sell_price': '324.7'},
{'sku_key': '11;23;32;41', 'num': 120, 'store_nums': 160, 'sell_price': '14.7'},
{'sku_key': '11;22;32;41', 'num': 120, 'store_nums': 160, 'sell_price': '14.7'},
]; //获取所有包含指定节点的路线
function filterProduct(ids) {
var result = [];
$(sku_list).each(function (k, v) {
_attr = ';' + v['sku_key'] + ';';
_all_ids_in = true;
for (k in ids) {
if (_attr.indexOf(';' + ids[k] + ';') == -1) {
_all_ids_in = false;
break;
}
}
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) {
result = result.concat(v['sku_key'].split(';')); });
return result;
} //已选择的节点数组
function _getSelAttrId() {
var list = [];
$('.goods_attr .goods_sku.sel').each(function () {
list.push($(this).attr('val'));
});
return list;
} $('.goods_attr .goods_sku').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(); //已经选择了的规格
var $_sel_goods_attr = $('.goods_sku.sel').parents('.goods_attr'); // step 1
var all_ids = filterAttrs(select_ids);
//比较选择的规格个数是否和键值个数是否一样
if ($('.goods_sku.sel').length == all_ids.length) {
//根据键值查询数据对应信息,并赋值
$.each(sku_list, function (idx, obj) {
sel_sku_key = all_ids.join(';');
console.log(sel_sku_key);
if (obj['sku_key'] == sel_sku_key) {
console.log('价格' + obj['sell_price'])
$('#sell_price').text(obj['sell_price']);
$('#store_nums').text(obj['store_nums']);
$('#sku_id').val(obj['id']);
}
});
} else {
$('#sku_id').val('');
} //获取未选择的
var $other_notsel_attr = $('.goods_attr').not($_sel_goods_attr); //设置为选择属性中的不可选节点
$other_notsel_attr.each(function () {
set_block($(this), all_ids); }); //step 2
//设置已选节点的同级节点是否可选
$_sel_goods_attr.each(function () {
update_2($(this));
}); }); function update_2($goods_attr) {
// 若该属性值 $li 是未选中状态的话，设置同级的其他属性是否可选
var select_ids = _getSelAttrId();
var $li = $goods_attr.find('.goods_sku.sel'); var select_ids2 = del_array_val(select_ids, $li.attr('val')); var all_ids = filterAttrs(select_ids2); set_block($goods_attr, all_ids);
} function set_block($goods_attr, all_ids) {
//根据 $goods_attr下的所有节点是否在可选节点中（all_ids） 来设置可选状态
$goods_attr.find('.goods_sku').each(function (k2, li2) {
if ($.inArray($(li2).attr('val'), all_ids) == -1) {
$(li2).addClass('b');
} else {
$(li2).removeClass('b');
}
}); }
function del_array_val(arr, val) {
//去除 数组 arr中的 val ，返回一个新数组
var a = [];
for (k in arr) {
if (arr[k] != val) {
a.push(arr[k]);
}
}
return a;
}
</script> </body>
</html>
商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果的更多相关文章
- B2C电子商务系统研发——商品SKU分析和设计（一）
一.SKU及相关概念定义 在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...
- jquery实现商品sku多属性选择（商品详情页）
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...
- vue+element 实现商品sku效果
在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...
- 前端实现商品sku属性选择
一.效果图 二.后台返回的数据格式 [{ "saleName": "颜色", "dim": 1, "saleAttrList&qu ...
- 电商ERP系统——商品SKU与库存设计
面试题经常问道,如何设计库存,哪些库存呢?分类属性的库存:不同颜色 不同尺码的属性的库存,这时候需要针对具体的SKU商品创建表. 总体思路 1.商品关联商品类别,商品类别关联多个商品属性,其中指定某几 ...
- 工具类：每次随机生成有销售库存有实际库存的1个店铺商品和对应的2个店铺商品sku
# coding:utf-8 # @fileName :2.每次随机生成有销售库存有实际库存的1个店铺商品和对应的2个店铺商品sku.py # @createTime :2020/4/4 10:33 ...
- B2C电子商务系统研发——商品SKU分析和设计（二）
转:http://www.cnblogs.com/winstonyan/archive/2012/01/07/2315886.html 上文谈到5种商品SKU设计模式,本文将做些细化说明. 笔者研究过 ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- Android仿淘宝继续上拉进入商品详情页的效果，使用双Fragment动画切换；
仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...
随机推荐
- NiosII常用函数整理
NiosII常用函数整理 IO操作函数函数原型:IORD(BASE, REGNUM) 输入参数:BASE为寄存器的基地址,REGNUM为寄存器的偏移量函数说明:从基地址为BASE的设备中读取寄存器中偏 ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- MySQL + Atlas --- 部署读写分离
阅读目录 1. 数据库用户配置 2. 主从数据库连接 3. Atlas配置 4. 读写分离测试 序章 Atlas是360团队弄出来的一套基于MySQL-Proxy基础之上的代理,修改了MySQL-Pr ...
- Spring MVC静态资源处理
优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...
- Javascript中的字典和散列
function Dictionary() { var items={}; this.set=function (key,value) { items[key]=value; }; this.remo ...
- 第一次写Web API接口
API是什么?只知道是网络接口,具体怎么写?不会!如何调用?不会!那怎么办? 第一次的经历~~ 需求:为其他项目提供一个接口 功能:为项目提供询盘信息和商家信息,格式为Json字符串 拿过来,就开始做 ...
- CSRF token 无法被验证. ----Yii连接数据库后数据库错误日志报错
CSRF token 无法被验证. 我使用的是mongodb+ yii1.1 What is CSRF, please see the details here. http://en.wikiped ...
- Docker容器是否可以改变世界？
Docker容器是否可以改变世界? 2016-01-15 杜亦舒 2016年了,很多大牛开始预测技术趋势,其中一个普遍的观点我也很认同: Docker会更加流行,会改变程序世界 2015年的上半年我接 ...
- AJAX第二发
开始总结自己在项目上的使用AJAX的情况: 该图为向后台请求的数据,前台返回的结果,返回的数据类型为object,businessObj由许多key组成,我们项目前台需要调用的数据就藏在数组recor ...
- 如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...