多屬性選擇
阿新 • • 發佈：2018-03-24
children 數組 turn ext input 獲取 cti 屬性 ++
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>
出處http://www.cnblogs.com/chengyunshen/p/7246966.html
多屬性選擇