笛卡尔积算法的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 的! 周琪力 ...
随机推荐
- 第二届普适计算和信号处理及应用国际会议论文2016年 The 2nd Conference on Pervasive Computing, Signal Processing and Applications(PCSPA, 2016)
A New Method for Mutual Coupling Correction of Array Output Signal 一种阵列输出信号互耦校正的新方法 Research of Robu ...
- Window 下好用的同步备份工具（来自微软）SyncToy
SyncToy 简单好用,满足备份的基本需求.
- PAT甲 1032. Sharing (25) 2016-09-09 23:13 27人阅读 评论(0) 收藏
1032. Sharing (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue To store Engl ...
- TFlearn——（1）notMNIST
1, 数据集简介 notMNIST, 看名字就知道,跟MNIST脱不了干系,其实就是升级版的MNIST,含有 A-J 10个类别的艺术印刷体字符,字符的形状各异,噪声更多,难度比 MNIST 要 ...
- Spring MVC深入讲解
一.前言: 大家好,Spring3 MVC是非常优秀的MVC框架,由其是在3.0版本发布后,现在有越来越多的团队选择了Spring3 MVC了.Spring3 MVC结构简单,应了那句话简单就是美,而 ...
- ECG心电图数据1
最近在写一篇基于小波变换的ECG信号压缩算法的论文,遇到了怎样获取ECG信号测试数据的问题,在百度和专业论坛里搜索了一番,发现也有很多朋友为此发愁.现在论文写好了,投稿中,顺便也把怎样获取和处理ECG ...
- JS 中的数据类型
简介 JavaScript 语言的每一个值,都属于某一种数据类型.JavaScript 的数据类型,共有七种 数值(number):整数和小数,比如1和3.14 字符串(string):文本 布尔值( ...
- 一步一步学习Swift之(二)：好玩的工具playground与swfit基础语法
playground好于在于能一边写代码一边看到输出的常量变量的值.不需要运行模拟器. 我们来试一下该工具的用法. 打开xcode6开发工具,选择Get started with a playgrou ...
- 【slenium专题】Webdriver同步设置
Webdriver同步设置常用等待类主要如下图所示 注:support.ui包内类主要实现显性等待功能,timeouts()内方法主要实现隐性等待功能 一.线程休眠 Thread.sleep(long ...
- Day 2 Python 基础数据类型
2.os.path.join()函数 语法: os.path.join(path1[,path2[,......]]) 返回值:将多个路径组合后返回 注:第一个绝对路径之前的参数将被忽略 1 2 3 ...