1.笛卡尔积在形式上比较容易理解，但作为按钮操作DOM的时候，我的思路大体还可以，有些偏差。看到这种矩行方阵，首先联想到二维数组，事实上这种方法完全可以实现，但是在性能和编码速度上都有弊端。

2.以下是代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             input{

                 width: 50px;

                 height: 35px;

             }

             .checked{

                 background: orange;

             }

         </style>

     </head>

     <body>

         <div class="container">

               <div class="row">

                 <input type="button" value="红" />

                 <input type="button" value="黄" />

                 <input type="button" value="蓝"/>

                 <input type="button" value="白"/>

                 <input type="button" value="军绿"/>

             </div>

             <div class="row">

                 <input type="button" value="xl"/>

                 <input type="button" value="xxl"/>

                 <input type="button" value="xxxl"/>

             </div>

             <div class="row">

                 <input type="button" value="纯棉"/>

                 <input type="button" value="牛仔"/>

                 <input type="button" value="针织"/>

             </div>

             <div class="row">

                 <input type="button" value="A"/>

                 <input type="button" value="B"/>

                 <input type="button" value="C"/>

                 <input type="button" value="D"/>

                 <input type="button" value="E"/>

                 <input type="button" value="F"/>

                 <input type="button" value="H"/>

             </div>

           </div>    

         <div class="box">

         </div>

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

         <script type="text/javascript">

             (function(){

                 //两个数组的笛卡尔积

                 var Dicar = function(a,b){

                     var ret=[];

                     for(var i=0;i<a.length;i++){

                         for(var j=0;j<b.length;j++){

                         ret.push(multi(a[i],b[j]));

                         }

                     }

                     return ret;

                 }

                 var multi = function(a,b){

                     if(!(a instanceof Array))

                         a = [a];

                     var ret = Array.call(null,a);

                     ret.push(b);

                     return ret;

                 }

                 //递归求笛卡尔最后结果

                 multiDicar = function(data){

                     var len = data.length;

                     if(len == 0) {

                         return [];

                     }else if(len == 1){

                         return data[0];

                     }else{

                         var r=data[0];

                         for(var i=1;i<len;i++){

                             var s = Dicar(r,data[i])

                             if(s.length>0){

                                 r=s;

                             }

                         }

                         return r;

                     }

                 }

             })();  

             //给按钮添加选中取消标志

             $(".container .row input").on("click",function(){

                 $(this).toggleClass("checked");

             });

             (function(){

                 //获取矩阵按钮

                 function getBtn(ele){

                     var arr=[];

                     var contain = $(ele);

                     for(let i=0;i<contain.length;i++){

                         arr.push($.makeArray(contain[i].children));

                     }

                     return arr;

                 }

                 //生成二维数组

                 var data = getBtn(".container .row"); 

                 //判断点击的元素是否在二维数组中

                 function getIndex(ele,map){

                     var res=[];

                     for(let i=0;i<map.length;i++){

                         for(let j=0;j<map[i].length;j++){

                             if(map[i][j] == ele){

                                 res = [i,j];

                             }

                         }

                     }

                     return res;

                 }

                //生成结果二维数组

                 var checked=[];

                 for(let i = 0;i<data.length;i++){

                     checked[i] = [];

                 } 

                 //处理结果二维数组中的断层

                 //如果有中间一行没数据，就截断阵列

                 function deal(checked){

                     if(checked[0].length == 0){

                         return [[]]

                     }

                     for(let i=0;i<checked.length;i++){

                         if(checked[i].length == 0){

                             return checked.slice(0,i);

                         }

                     }

                     return checked;

                 }

                 //删除数组的元素

                 function removeByValue(arr, val) {

                   for(var i=0; i<arr.length; i++) {

                     if(arr[i] == val) {

                       arr.splice(i, 1);

                       break;

                     }

                   }

                 }

                 //绑定点击事件

                 $(".container .row input").on("click",function(){

                     $(".box").empty();

                     var _this=$(this);

                     //判断在哪行那列

                     var res = getIndex(_this[0],data);

                     //判断是否是取消

                     //如果数据已经存在，就把它删除 ，bug在于按钮的文字不能重复

                     if(($.inArray(_this.val(),checked[res[0]])) !==-1){

                         removeByValue(checked[res[0]],_this.val());

                     }else{

                         checked[res[0]].push(_this.val());

                     }

                     //做笛卡尔积的结果

                     var r = multiDicar(deal(checked));

                     for(var i=0;i<r.length;i++){

                         $(".box").append("("+r[i]+")"+"<br>")

                     }

                 })

             })();

         </script>

     </body>

 </html>

笛卡尔积算法的sku的更多相关文章

  1. JS笛卡尔积算法与多重数组笛卡尔积实现方法示例

    js 笛卡尔积算法的实现代码,据对象或者数组生成笛卡尔积,并介绍了一个javascript多重数组笛卡尔积的例子,以及java实现笛卡尔积的算法与实例代码. 一.javascript笛卡尔积算法代码 ...

  2. PHP实现笛卡尔积算法

    概念 在数学中,两个集合X和Y的笛卡儿积(Cartesian product),又称直积,表示为 X × Y.设A.B是任意两个集合,在集合A中任意取一个元素x,在集合B中任意取一个元素y,组成一个有 ...

  3. JavaScripts之迪卡算法求积（n*n）适用于SKU信息计算等场景

    迪卡算法求积(n * n) 使用 array.reduce 的方式实现 笛卡尔积算法 const arr = [ ['黑色', '白色', '蓝色'], ['1.2KG', '2.0KG', '3.0 ...

  4. mysql（3）—— 内连接、外连接的区别

    先来看一下,内连接的语法: SELECT  XXX FROM XXX INNER JOIN XXX ON XXX; 这里 INNER 可以省略,在上一篇博客中我们对于笛卡尔积现象的研究中(http:/ ...

  5. 深入剖析linq的联接

    内联接 代码如下 from a in new List<string[]>{ ]{"张三","男"}, ]{"李四"," ...

  6. "一起来捉妖"怎么从瘸腿中组合到最合心意的妖灵

    背景: 最近两天活动,黑鬼白鬼合体觉醒秋容,陆无名,聂小倩,作为一个非土豪玩家,没有超高资质妖灵的我,想要在瘸腿妖灵中选取两个最佳选择,合体觉醒. 初选: 备选妖灵从5个维度录入数据,进行选择,分别为 ...

  7. SKU多维属性状态判断算法

    作者:周琪力,前端工程师,网络常用昵称「keelii」.在过去的4年里主要负责京东网站商品详情页的前端系统架构和开发,平时主要写 JavaScript 偶尔写点NodeJS,Python.琪力博客:  ...

  8. 淘宝SKU组合查询算法实现

    淘宝SKU组合查询算法实现 2015-11-14 16:18 1140人阅读 评论(0) 收藏 举报  分类: JavaScript(14)    目录(?)[+]   前端有多少事情可以做,能做到多 ...

  9. 前端如何展示商品属性：SKU多维属性状态判断算法的应用-Vue 实现

    由于公司开发了一个电商项目,涉及到前台商品属性的展示,所以百度上找了一下!找到了 周琪力写的一个算法例子,因为作者只有jQuery 实现demo, 自己仿照 demo 实现了一个 vue 的! 周琪力 ...

随机推荐

  1. 201709012工作日记--一台电脑创建两个Github账户上传代码

    1. 在一台主机上面使用多个GitHub账号 有时候,我们需要将个人账号和公司账号区分,这时候我们就会需要在一台电脑上使用2个不同的git账号. 2. 上传文件 http://blog.csdn.ne ...

  2. 201521123035-个人作业4——alpha阶段个人总结

    个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 第一部分 类别 具体技能和面试问题 现在的回答(大三) 语言 最拿手的计算机语言是一?,代码量多少?(偏前端 ...

  3. bootstrap collaspe

    和modal类似:也是通过data-toggle, data-target来指定: 可以把折叠插件改为手风琴,如果指定data-parent,那这个data-parent元素下的折叠插件就会像手风琴一 ...

  4. 使用jetty-maven-plugin运行maven多项目

    1.准备工作 org.eclipse.jetty   jetty-maven-plugin    9.2.11.v20150529 jdk  1.7 maven  3.1 2.采用maven管理多项目 ...

  5. Mina的ssl加密

    前面写的Mina的示例,都是可以通过telnet登录的,并且可以相互交互. 现在采用ssl加密的方式,对建立连接时,进行加密连接.这样,双方只有统一的加密,然后才可以连接. 密钥的生成之前有说过,里面 ...

  6. spring 注解实例

    先不说网上的那些例子了,百度到的都是一些零碎的东西.我之所以记博客,除了总结之外,很大一个原因是对网上的某些东西真的很无语. 拿注解来说,什么入门实例的东西,说是入门,却连一个基本的hello wor ...

  7. MySql数据库远程连接失败问题解决

    例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话. GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY ...

  8. C#时间加减

    DateTime dt =......//减数DateTime dt_n = DateTime.Now;//被减数 long x = dt .ToFileTime();//表示自协调世界时 (UTC) ...

  9. .net core获取服务器本地IP及Request访问端口

    string str = (Request.HttpContext.Connection.LocalIpAddress.MapToIPv4().ToString() + ":" + ...

  10. js中null, undefined 和 typeof

    参考自:http://www.cnblogs.com/wicub/p/3442891.html typeof 是运算符,注意不是函数,是运算符,其作用,是考察变量究竟是什么类型.或曰,是变量是否定义或 ...