1.笛卡尔积在形式上比较容易理解，但作为按钮操作DOM的时候，我的思路大体还可以，有些偏差。看到这种矩行方阵，首先联想到二维数组，事实上这种方法完全可以实现，但是在性能和编码速度上都有弊端。
2.以下是代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input{ width: 50px; height: 35px; 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"/> </div> </div> <div class="box"> </div> <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> //给按钮添加选中取消标志 $(".container .row input").attr("data-check",1); //获取矩阵按钮 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; } //生成默认值 function init(data){ var arr = []; for(let i = 0;i<data.length;i++){ arr.push([i,0]); //默认选中的样式 $(data[i][0]).attr("data-check",0); $(data[i][0]).css("background","gray"); } return arr; } var defaultVal = init(data); //渲染函数 function myRender(s,data){ var str=""; for(let i = 0; i<data.length;i++){ str+=data[s[i][0]][s[i][1]].value+","; } $(".box").append("<p>"+str+"</p>"); } //绑定点击事件 $(".container .row input").on("click",function(){ var _this=$(this); //判断在哪行那列 var res = getIndex(_this[0],data); if(_this.attr("data-check")==1 ){ _this.attr("data-check",0); _this.css("background","gray"); _this.siblings().css("background","orange") _this.siblings().attr("data-check",1) //插入要渲染的数据 defaultVal.splice(res[0],1,res); //渲染数据 myRender(defaultVal,data); }else{ //点击取消，替换回这一行的默认值 defaultVal[res[0]] = [res[0],0]; myRender(defaultVal,data); _this.attr("data-check",1); if(res[1]!==0){ _this.css("background","orange"); } } }) </script> </body> </html>
