笛卡尔积算法的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 的! 周琪力 ...
随机推荐
- spring AbstractRoutingDataSource实现动态数据源切换
使用Spring 提供的 AbstractRoutingDataSource 实现 创建 AbstractRoutingDataSource 实现类,负责保存所有数据源与切换数据源策略:public ...
- javascript data format
Date.prototype.Format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+& ...
- java编程中Properties类的具体作用和使用！
如果不熟悉 java.util.Properties类,那么现在告诉您它是用来在一个文件中存储键-值对的,其中键和值是用等号分隔的.(如清单 1 所示).最近更新的java.util.Properti ...
- 团队作业第四周（HCL盐酸队）——项目冲刺（第一篇）
任务认领情况: 1.坦克类实现:李密,卢泰佑 2.子弹类,线程类实现:黄国航 赖少勇 3.画笔类,地图的实现:陈舒标 黄宇航 明日任务安排: 今天在通过已经购买的GUI书籍的帮助下,已经实现了界面的 ...
- Delphi for iOS开发指南(4):在iOS应用程序中使用不同风格的Button组件
http://blog.csdn.net/DelphiTeacher/article/details/8923481 在FireMonkey iOS应用程序中的按钮 FireMoneky定义了不同类型 ...
- 对Cookie和Session的理解
本篇文章系自己总结经验,如果有朋友感觉哪里有问题,欢迎留言评论,谢谢~! Cookie和Session的产生背景: 在动态页面里面,每个变量都是有有效期的,所有的变量的最大生命周期就是一个脚本的周期( ...
- 关于gridview改变行内容事件需要点击别的行或控件才能执行
一般的datagridview控件: this.dgvAssetList.CurrentCell = null;//取消datagridview行的编辑状态 Dev gridcontrol控件 Gr ...
- ASP.NET 实现多页面合并一页显示
目前业务有一个需求: 就是把多个网页合并到一个页面显示, 在实现过程中我一般使用两种方法: 利用母版页设置导航栏, 定位到每个网页; 利用用户控件( .acsx 后缀的文件), 但是有个问题就是传参比 ...
- 网易云社区有奖问答活动第二期——技术领导力、深入分布式、PHP圣经、Linux运维、Unity……三月热点图书等你拿！
网易云社区第二期有奖问答活动开始了!(第一期活动已结束:人工智能图书大抽奖!) 欢迎积极参与网易云社区,讨论问题,交流心得.我们本期准备了一批技术领域热点图书,送给参与社区的朋友们,将以抽奖的形式送出 ...
- With语句上下文管理
在平时工作中总会有这样的任务,它们需要开始前做准备,然后做任务,然后收尾清理....比如读取文件,需要先打开,读取,关闭 这个时候就可以使用with简化代码,很方便 1.没有用with语句 1 2 3 ...