1.笛卡爾積在形式上比較容易理解，但作為按鈕操作DOM的時候，我的思路大體還可以，有些偏差。看到這種矩行方陣，首先聯想到二維數組，事實上這種方法完全可以實現，但是在性能和編碼速度上都有弊端。
2.以下是代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 input{ 8 width: 50px; 9 height: 35px; 10 } 11 .checked{ 12 background: orange; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="container"> 18 <div class="row"> 19 <input type="button" value="紅" /> 20 <input type="button" value="黃" /> 21 <input type="button" value="藍"/> 22 <input type="button" value="白"/> 23 <input type="button" value="軍綠"/> 24 25 </div> 26 27 <div class="row"> 28 <input type="button" value="xl"/> 29 <input type="button" value="xxl"/> 30 <input type="button" value="xxxl"/> 31 </div> 32 33 <div class="row"> 34 <input type="button" value="純棉"/> 35 <input type="button" value="牛仔"/> 36 <input type="button" value="針織"/> 37 </div> 38 39 <div class="row"> 40 <input type="button" value="A"/> 41 <input type="button" value="B"/> 42 <input type="button" value="C"/> 43 <input type="button" value="D"/> 44 <input type="button" value="E"/> 45 <input type="button" value="F"/> 46 <input type="button" value="H"/> 47 </div> 48 </div> 49 50 <div class="box"> 51 52 </div> 53 <script src="jquery-3.2.1.min.js"></script> 54 <script type="text/javascript"> 55 (function(){ 56 //兩個數組的笛卡爾積 57 var Dicar = function(a,b){ 58 var ret=[]; 59 for(var i=0;i<a.length;i++){ 60 for(var j=0;j<b.length;j++){ 61 ret.push(multi(a[i],b[j])); 62 } 63 } 64 return ret; 65 } 66 var multi = function(a,b){ 67 if(!(a instanceof Array)) 68 a = [a]; 69 var ret = Array.call(null,a); 70 ret.push(b); 71 return ret; 72 } 73 //遞歸求笛卡爾最后結果 74 multiDicar = function(data){ 75 var len = data.length; 76 if(len == 0) { 77 return []; 78 }else if(len == 1){ 79 return data[0]; 80 }else{ 81 var r=data[0]; 82 for(var i=1;i<len;i++){ 83 var s = Dicar(r,data[i]) 84 if(s.length>0){ 85 r=s; 86 } 87 } 88 return r; 89 } 90 } 91 })(); 92 93 94 //給按鈕添加選中取消標志 95 $(".container .row input").on("click",function(){ 96 $(this).toggleClass("checked"); 97 }); 98 99 100 (function(){ 101 //獲取矩陣按鈕 102 function getBtn(ele){ 103 var arr=[]; 104 var contain = $(ele); 105 for(let i=0;i<contain.length;i++){ 106 arr.push($.makeArray(contain[i].children)); 107 } 108 return arr; 109 } 110 //生成二維數組 111 var data = getBtn(".container .row"); 112 113 //判斷點擊的元素是否在二維數組中 114 function getIndex(ele,map){ 115 var res=[]; 116 for(let i=0;i<map.length;i++){ 117 for(let j=0;j<map[i].length;j++){ 118 if(map[i][j] == ele){ 119 res = [i,j]; 120 } 121 } 122 } 123 return res; 124 } 125 126 //生成結果二維數組 127 var checked=[]; 128 for(let i = 0;i<data.length;i++){ 129 checked[i] = []; 130 } 131 132 //處理結果二維數組中的斷層 133 //如果有中間一行沒數據，就截斷陣列 134 function deal(checked){ 135 if(checked[0].length == 0){ 136 return [[]] 137 } 138 for(let i=0;i<checked.length;i++){ 139 if(checked[i].length == 0){ 140 return checked.slice(0,i); 141 } 142 } 143 return checked; 144 } 145 146 //刪除數組的元素 147 function removeByValue(arr, val) { 148 for(var i=0; i<arr.length; i++) { 149 if(arr[i] == val) { 150 arr.splice(i, 1); 151 break; 152 } 153 } 154 } 155 156 //綁定點擊事件 157 $(".container .row input").on("click",function(){ 158 $(".box").empty(); 159 var _this=$(this); 160 //判斷在哪行那列 161 var res = getIndex(_this[0],data); 162 163 //判斷是否是取消 164 //如果數據已經存在，就把它刪除 ，bug在於按鈕的文字不能重復 165 if(($.inArray(_this.val(),checked[res[0]])) !==-1){ 166 removeByValue(checked[res[0]],_this.val()); 167 }else{ 168 checked[res[0]].push(_this.val()); 169 } 170 //做笛卡爾積的結果 171 var r = multiDicar(deal(checked)); 172 for(var i=0;i<r.length;i++){ 173 $(".box").append("("+r[i]+")"+"<br>") 174 } 175 }) 176 })(); 177 </script> 178 </body> 179 </html>