商城网站商品sku选择的js简易实现

<!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>價格：<span id="mycount">0元</span></div>

    <div id="panel_sku_list">

      <pre></pre>

    </div>

    <div id="panel_sel">

    </div>

  </div>

  <script src="./js/jquery-1.9.1.min.js"></script>

  <script type="text/javascript">

    /*

属性集

下面一共有4个属性

属性item1 下面有 2个属性值 分别是 10,11

（举个常见的例子 属性尺码 下有 S M L XL 4个属性值 ）

*/

    var keys = {

      'attr1': ['10', '11'],

      '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

      },

    ];

    /**init start */

    //显示html结构

    function show_attr_item() {

      var html = '';

      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()

    /**init end */

    //获取所有包含指定节点的路线

    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;

          }

        }

        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['attrs'].split('|'));

      });

      return result;

    }

    //已选择的节点数组

    function _getSelAttrId() {

      var list = [];

      $('.goods_attr li.sel').each(function () {

        list.push($(this).attr('val'));

        console.log($(this).attr('val'))

        console.log(list)

        if(list.length === 4) {

          let mycount = document.getElementById('mycount');

          mycount.innerText = '45元'

        }

      });

      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();

      //已经选择了的规格

      var $_sel_goods_attr = $('li.sel').parents('.goods_attr');

      // step 1

      var all_ids = filterAttrs(select_ids);

      //获取未选择的

      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('li.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('li').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://blog.csdn.net/csdn924618338/article/details/51455595

我在源代码基础上加了一点点点点点点点。。。。

商城网站商品sku选择的js简易实现的更多相关文章

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

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

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

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

  3. 个人的web商城网站

    项目介绍 1.作为前端的菜鸟,每每看到Github上有很多大神分享着自己的项目时,内心都是蠢蠢欲动,这次终于下定决心要给自己一段时间来完成属于自己的一份作品.2.于是在查找了大量资料,思考着技术选型, ...

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

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

  5. 建设商城网站ecshop如何开启伪静态

    ecshop是国内一款比较流行的商城网站建设系统,它拥有比较完善的电子商务交易流程,其使用PHP+网站建设者的喜爱.   商城网站也需要网站优化,开启伪静态是个比较好的方法.   ECSHOP的伪静态 ...

  6. YiShop_商城网站设计应该注意什么

    商城网站的建设,不是一件简单的事情,当然,也不要把商城网站的建设想得那么的复杂,在建设商城网站的时候 ,只要考虑到以下这些因素,定能把商城网站建设工作做好.那么商城网站建设要考虑哪些因素:(1)风格 ...

  7. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

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

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

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

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

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

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

随机推荐

  1. 记一次 .NET 某医疗器械 程序崩溃分析

    一:背景 1.讲故事 前段时间有位朋友在微信上找到我,说他的程序偶发性崩溃,让我帮忙看下怎么回事,上面给的压力比较大,对于这种偶发性崩溃,比较好的办法就是利用 AEDebug 在程序崩溃的时候自动抽一 ...

  2. day04-JavaScript01

    JavaScript01 官方文档 http://www.w3school.com.cn/js/index.asp 基本说明: JavaScript能改变html内容,能改变html属性,能改变htm ...

  3. 多项式回归 & pipeline & 学习曲线 & 交叉验证

    多项式回归就是数据的分布不满足线性关系,而是二次曲线或者更高维度的曲线.此时只能使用多项式回归来拟合曲线.比如如下数据,使用线性函数来拟合就明显不合适了. 接下来要做的就是升维,上面的真实函数是:$ ...

  4. 云原生之旅 - 7）部署Terrform基础设施代码的自动化利器 Atlantis

    前言 前面有几篇文章讲述了如何使用Terraform创建资源 (基础设施即代码 Terraform 快速入门, 使用 Terraform 创建 Kubernetes) 以及 Kubernetes时代的 ...

  5. 基于 .NET 7 的 QUIC 实现 Echo 服务

    前言 随着今年6月份的 HTTP/3 协议的正式发布,它背后的网络传输协议 QUIC,凭借其高效的传输效率和多路并发的能力,也大概率会取代我们熟悉的使用了几十年的 TCP,成为互联网的下一代标准传输协 ...

  6. 833(DIV2)——C题题解

    题目链接 题目大意: 给定n个数,你可以对数值为0的数改变其为任意值,问最后前缀和为0的个数的最大值. 思路: 这题比较可惜,自己的思路没有问题,但是他少了一些东西.对数组进行前缀和处理,我们可以发现 ...

  7. 5、有一行电文，译码规律为： a ——> z b——> y c ——> x. 即把第一个字母变成第26个字母， 第i个字母变成第（26-i+1）个字母， 非字母字符不变

    /* 有一行电文,译码规律为: a --> z b--> y c --> x. 即把第一个字母变成第26个字母, 第i个字母变成第(26-i+1)个字母, 非字母字符不变 */ #i ...

  8. 把Mybatis Generator生成的代码加上想要的注释

    作者:王建乐 1 前言 在日常开发工作中,我们经常用Mybatis Generator根据表结构生成对应的实体类和Mapper文件.但是Mybatis Generator默认生成的代码中,注释并不是我 ...

  9. mongorestore target dump invalid CreateFile dump The system cannot find

    问题 使用 mongorestore 指定 dump 文件夹,恢复数据报错. mongorestore target 'dump' invalid: CreateFile dump: The syst ...

  10. Linux相关命令及软件安装教程

    @font-face { font-family: "Times New Roman" } @font-face { font-family: "宋体" } @ ...