商品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 1var 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>

转载于:https://www.cnblogs.com/whlives/p/5548698.html

商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果相关推荐

java实现商品sku_jquery实现商品sku多属性选择功能（商品详情页）
SKU=Stock Keeping Unit(库存量单位).即库存进出计量的基本单元,可以是以件,盒,托盘等为单位. SKU是用来定价和管理库存的,比如一个产品有很多颜色,很多配置,每个颜色和配置的组 ...
网页商品SKU(规格)选择
什么是sku 维基百科如下最小存货单位(Stock Keeping Unit) 在连锁零售门店中有时称单品为一个SKU,定义为保存库存控制的最小可用单位,例如例如: iPhone有规格有:颜色[红 ...
淘宝商品详情接口淘宝商品库存接口淘宝商品销量接口淘宝商品sku信息接口淘宝商品优惠价接口
淘宝商品详情API接口item_get是一个非常重要的API接口,它可以获取淘宝商品的详细信息.对于淘_宝卖家来说,通过调用该接口可以实现对自己商品信息的获取.修改和管理等功能. 使用item_get ...
java 商品多规格_大家有做过商品多规格的功能嘛?商品的不同规格对应不同价格和库存一般是如何实现的?...
13 2016-02-01 18:16:22 +08:00 4 给你做了个例子 ... 见下 ... mysql> SELECT * FROM `ware_product`; +----+- ...
B2C电子商务系统研发——商品SKU分析和设计（一）
一.SKU及相关概念定义在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...
淘宝店铺商品管理解决方案-商品SKU信息获取和修改oAuth2.0接口接入解决方案
商品管理对接方案: 从店铺宝贝管理场景出发,提供涵盖了宝贝主图.标题.属性信息.详情页海报等各个模块高效处理/优化的功能.并通过提供批量修改.自动补库存.定时上架.库存预警等功能帮助商家提高店铺经营效 ...
B2C电子商务系统研发——商品SKU分析和设计
一.SKU及相关概念定义在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...
uni-app类似淘宝选择商品多规格(库存判断)
1.组件效果展示瞎封装组件系列: VUE简单提示框 VUE树形图(递归实现) VUE多店铺购物车 2.使用方法引入组件: import goodsSpec from '@/components/g ...
VUE类似淘宝选择商品多规格(库存判断)
1.组件效果展示也可访问链接查看网页效果... 后面又用uni-app写过一次,比这次稍微清晰一些 uni-app类似淘宝选择商品多规格(库存判断) 瞎封装组件系列: VUE简单提示框 VUE树形图 ...

商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果

商品sku规格选择效果，没有商品的不能选中，选择顺序不影响展示结果相关推荐

最新文章

热门文章