笛卡尔积算法的sku
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的更多相关文章
- JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
js 笛卡尔积算法的实现代码,据对象或者数组生成笛卡尔积,并介绍了一个javascript多重数组笛卡尔积的例子,以及java实现笛卡尔积的算法与实例代码. 一.javascript笛卡尔积算法代码 ...
- PHP实现笛卡尔积算法
概念 在数学中,两个集合X和Y的笛卡儿积(Cartesian product),又称直积,表示为 X × Y.设A.B是任意两个集合,在集合A中任意取一个元素x,在集合B中任意取一个元素y,组成一个有 ...
- JavaScripts之迪卡算法求积（n*n）适用于SKU信息计算等场景
迪卡算法求积(n * n) 使用 array.reduce 的方式实现 笛卡尔积算法 const arr = [ ['黑色', '白色', '蓝色'], ['1.2KG', '2.0KG', '3.0 ...
- mysql（3）—— 内连接、外连接的区别
先来看一下,内连接的语法: SELECT XXX FROM XXX INNER JOIN XXX ON XXX; 这里 INNER 可以省略,在上一篇博客中我们对于笛卡尔积现象的研究中(http:/ ...
- 深入剖析linq的联接
内联接 代码如下 from a in new List<string[]>{ ]{"张三","男"}, ]{"李四"," ...
- "一起来捉妖"怎么从瘸腿中组合到最合心意的妖灵
背景: 最近两天活动,黑鬼白鬼合体觉醒秋容,陆无名,聂小倩,作为一个非土豪玩家,没有超高资质妖灵的我,想要在瘸腿妖灵中选取两个最佳选择,合体觉醒. 初选: 备选妖灵从5个维度录入数据,进行选择,分别为 ...
- SKU多维属性状态判断算法
作者:周琪力,前端工程师,网络常用昵称「keelii」.在过去的4年里主要负责京东网站商品详情页的前端系统架构和开发,平时主要写 JavaScript 偶尔写点NodeJS,Python.琪力博客: ...
- 淘宝SKU组合查询算法实现
淘宝SKU组合查询算法实现 2015-11-14 16:18 1140人阅读 评论(0) 收藏 举报 分类: JavaScript(14) 目录(?)[+] 前端有多少事情可以做,能做到多 ...
- 前端如何展示商品属性：SKU多维属性状态判断算法的应用-Vue 实现
由于公司开发了一个电商项目,涉及到前台商品属性的展示,所以百度上找了一下!找到了 周琪力写的一个算法例子,因为作者只有jQuery 实现demo, 自己仿照 demo 实现了一个 vue 的! 周琪力 ...
随机推荐
- id 与 void * 转换
MRC 环境下: id 变量赋值给 void * 变量运行时不会有问题. id obj1 = [NSObject new];void * p = obj1; void * 变量赋值给 id 变量并调用 ...
- CentOS 7 x64部署tomcat
1.jdk1.7 官网地址:jdk下载地址 下载地址:jdk下载地址 2.tomcat 没啥可说,wget 去下载 3.开放端口 firewall-cmd --zone=/tcp --permane ...
- Linux 用 sftp scp命令 互传文件
sftp它类似于 ftp, 但它进行加密传输,比FTP有更高的安全性. sftp 是SSH服务的子程序 常用命令 pwd 查看当前工作目录 ls 查看远程当前目录下的所以文件或者目录信息 lls 查看 ...
- 【LeetCode】 Valid Sudoku
Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...
- 【算法31】寻找数组的主元素(Majority Element)
题外话 最近有些网友来信问我博客怎么不更新了,是不是不刷题了,真是惭愧啊,题还是在刷的,不过刷题的频率没以前高了,看完<算法导论>后感觉网上很多讨论的题目其实在导论中都已经有非常好的算法以 ...
- NavigationViewController页面间通信及传值
使用进行页面跳转时,应该使用方法来跳转至下一页面,这样的话,下一页面同样在容器中. 1AloneSetPrizeViewController *setPrize = [[AloneSetPrizeVi ...
- C# 一些代码小结--datGirdView 保存到csv文件
if (dataGridView1.Rows.Count == 0) { MessageBox.Show("No data available!", "Prompt&qu ...
- Wpf中显示Unicode字符
1. 引言 今天在写一个小工具,里面有些字符用Unicode字符表示更合适.但是一时之间却不知道怎么写了.经过一番查找,终于找到了办法.记到这里,一是加深印象,二则以备查询. 2. C#中使用Unic ...
- Storm的Metric接口简介
本文由作者林洋港授权网易云社区发布. 作为服务端程序,我们总是需要向外界报告一些统计数据,以助于了解系统的运行情况,比如某个接口的调用时间.系统处理的请求数等等.当我们的程序以Storm Topolo ...
- HTTP/1.0中，状态码200 301 304 403 404 500的含义？
200 OK 服务器成功处理了请求 301 重定向,请求的URL已移走 304未修改,客户的缓存资源是最新的,要客户端使用缓存 403禁止,请求被服务器拒绝了 404未找到资源 500内部服务器错误, ...