<!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规格选择效果，没有商品的不能选中，选择顺序不影响展示结果的更多相关文章

  1. B2C电子商务系统研发——商品SKU分析和设计（一）

    一.SKU及相关概念定义 在设计商品SKU之前,首先让我们熟悉一下SKU和相关的一些概念. # 什么是SKU: SKU=Stock Keeping Unit(库存量单位) 同一型号的商品,或者说是同一 ...

  2. jquery实现商品sku多属性选择（商品详情页）

    转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...

  3. vue+element 实现商品sku效果

    在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...

  4. 前端实现商品sku属性选择

    一.效果图 二.后台返回的数据格式 [{ "saleName": "颜色", "dim": 1, "saleAttrList&qu ...

  5. 电商ERP系统——商品SKU与库存设计

    面试题经常问道,如何设计库存,哪些库存呢?分类属性的库存:不同颜色 不同尺码的属性的库存,这时候需要针对具体的SKU商品创建表. 总体思路 1.商品关联商品类别,商品类别关联多个商品属性,其中指定某几 ...

  6. 工具类：每次随机生成有销售库存有实际库存的1个店铺商品和对应的2个店铺商品sku

    # coding:utf-8 # @fileName :2.每次随机生成有销售库存有实际库存的1个店铺商品和对应的2个店铺商品sku.py # @createTime :2020/4/4 10:33 ...

  7. B2C电子商务系统研发——商品SKU分析和设计（二）

    转:http://www.cnblogs.com/winstonyan/archive/2012/01/07/2315886.html 上文谈到5种商品SKU设计模式,本文将做些细化说明. 笔者研究过 ...

  8. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  9. Android仿淘宝继续上拉进入商品详情页的效果，使用双Fragment动画切换；

    仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...

随机推荐

  1. jquery.trim() vs JS.trim()

    如果你在IE8浏览器下开发网站,其实这是个假命题,因为原生的javascript 并不支持 .trim()方法,如果你写了类似document.getElementByID().trim();的代码, ...

  2. application、viewstate、纯HTML提交方式

    Application - 全局公共变量组 存放位置:服务端 所有的访问用户都是访问的同一个变量 声明周期:永久 用法同session类似 viewstate-病例 因为http的无状态性,需要记录上 ...

  3. linux下使用多线程编写的聊天室

    自从开始学linux网络编程后就想写个聊天室,一开始原本打算用多进程的方式来写,可是发觉进程间的通信有点麻烦,而且开销也大,后来想用多线程能不能实现呢,于是便去看了一下linux里线程的用法,实际上只 ...

  4. Spring 配置解析之Properties

    http://www.cnblogs.com/dragonfei/archive/2016/10/09/5906474.html *********************************** ...

  5. 后缀树(suffix tree)

    参考: 从前缀树谈到后缀树 后缀树 Suffix Tree-后缀树 字典树(trie树).后缀树 一.前缀树 简述:又名单词查找树,tries树,一种多路树形结构,常用来操作字符串(但不限于字符串), ...

  6. Oracle之常见问题诊断方法

    Oracle认证:常见问题诊断方法如下: 1.TNS-12154 Error 或ORA-12154 特征:SQL*NET没有找到连接串或别名 原因1:(1)没有找到TNSNAMES.ORA文件,该文件 ...

  7. 关于《hibernate多对多》有中间表的建立

    角色 与 菜单(资源)的多对多关系,在这里我们建立中间表,用两个oneToMany实现 实体类: 角色(GmRole)  菜单(GmMenu) 中间表(GmRoleRight) 1.在角色实体中 pa ...

  8. svn-多个项目版本库和自动同步更新post-commit

    由于项目测试需求,需要远程服务器上使用svn做版本控制. 需求: 1,项目test1,项目test2,各自独立版本库,各自独立用户权限,便于项目管理 2,同步提交,本地svn提交至版本库后,服务器上的 ...

  9. javascript 之 prototype继承机制

    理解Javascript语言的继承机制 javascript没有"子类"和"父类"的概念,也没有"类"(class)和"实例&qu ...

  10. Python’s SQLAlchemy vs Other ORMs[转发 3]Django's ORM

    Django's ORM Django is a free and open source web application framework whose ORM is built tightly i ...