笛卡尔积算法的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 mvc传入List<Object>的一次尝试
首先,看一段异常: org.springframework.http.converter.HttpMessageNotReadableException: Could not read documen ...
- MFC中添加新的对话框
MFC工程中,除了系统自动生成的一些对话框之外,还需要根据自己的需求,添加新的对话框.这里总结下自己最近使用的方法. 首先,找到Resource View中自己新建的工程,然后右键,选择Add Cla ...
- cordova3.X-4.0添加自定义插件方法
cordova3.X之后,插件不能自己手动添加了,手动添加后,只要cordova build,数据立即被抹去. 因此,3.X后要添加插件,需要用 cordova plungin add "你 ...
- poj1836 Alignment
Alignment Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11707 Accepted: 3730 Descri ...
- 20、docker swarm
Swarm是Docker官方提供的一款集群管理工具,其主要作用是把若干台Docker主机抽象为一个整体,并且通过一个入口统一管理这些Docker主机上的各种Docker资源.Swarm和Kuber ...
- C++互斥器：Semaphores
类似于Mutex,但信号量Semaphores不仅仅是锁和解锁那么简单,更高级的是,可以被锁住最多n次. 其中这个n是信号量被产生时指定的n.该值常常被用来代表“可以锁定住一份资源”的线程个数. 可以 ...
- 为某金融企业的IT技术部人员提供基于TFS的软件研发流程介绍
受莫金融企业IT信息技术部的邀请,为该金融企业的某省分公司.地市分公司的IT技术人员提供了一场基于TFS的软件研发流程的技术培训,希望可以借此提高该企业的软件研发.运维水平,同时推动企业软件研发信息化 ...
- SQL笔记---多表左联
这是实际场景当中的一个例子,拿出来分析总结思路. -- SQL 查询 --SELECT orderQuery.Rk_SkuCode , orderQuery.SkuName, ...
- Nginx an upstream response is buffered to a temporary file
1.错误日志:warn:an upstream response is buffered to a temporary file 解决办法:增加fastcgi_buffers 8 4K; fa ...
- 数据帮助类(DataHelper)
/// <summary> /// 是否为空... /// </summary> /// <param name="str">数据值</p ...