笛卡尔积算法的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 的! 周琪力 ...
随机推荐
- Windows10+Python3+BeautifulSoup4 安装
用正则表达式来提取网页中的内容是相当麻烦的,这里介绍一个可以从HTML或XML文件中提取数据的Python库:Beautiful Soup.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的 ...
- volatile 类型修饰符
volatile 类型修饰符 1.解释 就像大家更熟悉的const一样,volatile是一个类型修饰符(type specifier).它是被设计用来修饰被不同线程访问和修改的变量.如果不加入vol ...
- mongodb 问题
启动mongodb时,提示Unclean shutdown detected mongodb,解决方法很简单 mongod --repair --dbpath D:\MongoDB\blog 不用 ...
- 教程-Delphi调用百度地图API(XE8+WIN7)
unit U_map; interface //---------------------------------------------------// //----------COPY BY 无言 ...
- Sql查询两个时间段有重叠的记录
这个问题看上去简单,但是想了很久,最后发现,自己的思路有点乱. 下面四条时间段都和最上面那个有重叠的关系,就是这么个意思. 这里是问题的答案: 2个时间: a_start, a_end b_start ...
- 使用base64转码的方式上传图片
1.前端html代码 <input style="width:100%" onchange="loadpicture(1)" type="fil ...
- 蚂蚁男孩.队列组件（Framework.Mayiboy.Queue）
它能做什么 主要是用来方便使用队列而诞生,该组件封装了Queue和Redis中的队列,能够通过简单配置就可以高效快速使用起来. 使用说明 一. 下载源码,自己手动编译,手动引用必要的程序集.(需 ...
- leetcode 杨辉三角
给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 5 输出: [ [1], [1,1], [1,2,1], [ ...
- dotNet core 应用部署centos
---恢复内容开始--- 阅读目录 需要安装的插件以及支撑架构 安装dotnetSDK 安装jexus 安装supervisord 遇到问题汇总 注意事项.扩展延伸 需要安装的插件以及支撑架构 1.d ...
- WPF画辐射图
public void WriteLineCircle(double originX, double originY, double r, int lineCount,List<string&g ...