1.依赖jquery，主要利用二维数组。
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 background: orange;
11 }
12 </style>
13 </head>
14 <body>
15 <div class="container">
16 <div class="row">
17 <input type="button" value="红" />
18 <input type="button" value="黄" />
19 <input type="button" value="蓝"/>
20 <input type="button" value="白"/>
21 <input type="button" value="军绿"/>
22
23 </div>
24
25 <div class="row">
26 <input type="button" value="xl"/>
27 <input type="button" value="xxl"/>
28 <input type="button" value="xxxl"/>
29 </div>
30
31 <div class="row">
32 <input type="button" value="纯棉"/>
33 <input type="button" value="牛仔"/>
34 <input type="button" value="针织"/>
35 </div>
36
37 <div class="row">
38 <input type="button" value="A"/>
39 <input type="button" value="B"/>
40 <input type="button" value="C"/>
41 <input type="button" value="D"/>
42 <input type="button" value="E"/>
43 </div>
44 </div>
45
46 <div class="box">
47
48 </div>
49
50
51 <script src="jquery-3.2.1.min.js"></script>
52 <script type="text/javascript">
53
54 //给按钮添加选中取消标志
55 $(".container .row input").attr("data-check",1);
56 //获取矩阵按钮
57 function getBtn(ele){
58 var arr=[];
59 var contain = $(ele);
60 for(let i=0;i<contain.length;i++){
61 arr.push($.makeArray(contain[i].children));
62 }
63 return arr;
64 }
65 //生成二维数组
66 var data = getBtn(".container .row");
67
68
69 //判断点击的元素是否在二维数组中
70 function getIndex(ele,map){
71 var res=[];
72 for(let i=0;i<map.length;i++){
73 for(let j=0;j<map[i].length;j++){
74 if(map[i][j] == ele){
75 res = [i,j];
76 }
77 }
78 }
79 return res;
80 }
81
82 //生成默认值
83 function init(data){
84 var arr = [];
85 for(let i = 0;i<data.length;i++){
86 arr.push([i,0]);
87 }
88 return arr;
89 }
90 var defaultVal = init(data);
91
92
93 //渲染函数
94 function myRender(s,data){
95 var str="";
96 for(let i = 0; i<data.length;i++){
97 str+=data[s[i][0]][s[i][1]].value+",";
98 }
99 $(".box").append("<p>"+str+"</p>");
100 }
101
102 //绑定点击事件
103 $(".container .row input").on("click",function(){
104 var _this=$(this);
105 if(_this.attr("data-check")==1){
106 _this.attr("data-check",0);
107 _this.css("background","gray");
108 _this.siblings().css("background","orange")
109
110 //判断在哪行那列
111 var res = getIndex(_this[0],data);
112
113 //插入要渲染的数据
114 defaultVal.splice(res[0],1,res);
115
116 //渲染数据
117 myRender(defaultVal,data);
118
119 }else{
120 _this.attr("data-check",1);
121 _this.css("background","orange");
122 }
123 })
124
125 </script>
126 </body>
127 </html>
事实上这个东西还有无限扩展，包括利用vue或react进行dom操作，还有各种接口，商品数量的操作等，时间有限，先这些。
时间： 2024-12-15 17:29:57