仿制淘宝sku点击效果

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         <script src="jquery-3.2.1.min.js"></script>
 51         <script type="text/javascript">
 52
 53             //给按钮添加选中取消标志
 54             $(".container .row input").attr("data-check",1);
 55             //获取矩阵按钮
 56             function getBtn(ele){
 57                 var arr=[];
 58                 var contain = $(ele);
 59                 for(let i=0;i<contain.length;i++){
 60                     arr.push($.makeArray(contain[i].children));
 61                 }
 62                 return arr;
 63             }
 64             //生成二维数组
 65             var data = getBtn(".container .row");
 66
 67
 68             //判断点击的元素是否在二维数组中
 69             function getIndex(ele,map){
 70                 var res=[];
 71                 for(let i=0;i<map.length;i++){
 72                     for(let j=0;j<map[i].length;j++){
 73                         if(map[i][j] == ele){
 74                             res = [i,j];
 75                         }
 76                     }
 77                 }
 78                 return res;
 79             }
 80
 81             //生成默认值
 82             function init(data){
 83                 var arr = [];
 84                 for(let i = 0;i<data.length;i++){
 85                     arr.push([i,0]);
 86                     //默认选中的样式
 87                     $(data[i][0]).attr("data-check",0);
 88                     $(data[i][0]).css("background","gray");
 89                 }
 90                 return arr;
 91             }
 92             var defaultVal = init(data);
 93
 94
 95             //渲染函数
 96             function myRender(s,data){
 97                     var str="";
 98                     for(let i = 0; i<data.length;i++){
 99                         str+=data[s[i][0]][s[i][1]].value+",";
100                     }
101                     $(".box").append("<p>"+str+"</p>");
102             }
103
104             //绑定点击事件
105             $(".container .row input").on("click",function(){
106                 var _this=$(this);
107                 //判断在哪行那列
108                 var res = getIndex(_this[0],data);
109
110                 if(_this.attr("data-check")==1 ){
111                     _this.attr("data-check",0);
112                     _this.css("background","gray");
113                     _this.siblings().css("background","orange")
114                     _this.siblings().attr("data-check",1)
115
116                     //插入要渲染的数据
117                     defaultVal.splice(res[0],1,res);
118                     //渲染数据
119                     myRender(defaultVal,data);
120
121                 }else{
122                     //点击取消，替换回这一行的默认值
123                     defaultVal[res[0]] = [res[0],0];
124                     myRender(defaultVal,data);
125                     _this.attr("data-check",1);
126                     if(res[1]!==0){
127                         _this.css("background","orange");
128                     }
129                 }
130         })
131
132         </script>
133     </body>
134 </html>

事实上这个东西还有无限扩展，包括利用vue或react进行dom操作，还有各种接口，商品数量的操作等，时间有限，先这些。

转载于:https://www.cnblogs.com/chengyunshen/p/7244278.html

仿制淘宝sku点击效果相关推荐

设置淘宝sku方法技巧淘宝SKU如何设置
淘宝sku是什么意思?相信商家们对宝贝的sku都很清楚,sku带来的产品的不同颜色.尺寸.但是设置sku并不是一件简单的事情哦,它对店铺的权重和转化都是有一定的联系的.那么sku应该如何正确的去设置呢 ...
淘宝新店如何推广效果比较好？有哪些渠道？
现在每天都有人在淘宝开店,淘宝在开店前三个月会有流量支持期,但是很多新手商家不知道如何获得流量.也不知道怎么去做推广的.那么淘宝新店如何推广效果比较好?有哪些渠道?下面一起来了解一下吧! 1.淘宝 ...
html+css简单仿制淘宝商品界面
一.主要思路二.完整代码三.最终效果一.主要思路 1.写一个大盒子,将内部分为如图几个部分,分别写对应的内容 2.首先给整个盒子宽高,传进图片后调整图片宽高 3.重点在于"找同款&qu ...
jquery仿淘宝SKU选择商品属性代码
jquery仿淘宝SKU选择商品属性代码下载地址:https://www.yujianni.top/news/comp_artinfo.html?id=103
仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
Android：实现仿美团/淘宝多级分类菜单效果
本例要实现的是诸如美团/淘宝/百度糯米多级分类菜单效果.当分类数量非常多时可以考虑采用两级分类,而诸如美团这种表现方式是一个不错的选择. 首先上效果图: 主要代码: 1. PopupWin ...
C#编写Windows服务程序 (服务端),客户端使用消息队列实现淘宝订单全链路效果
需求: 针对淘宝提出的订单全链路产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...
C#编写Windows服务程序 (服务端),client使用消息队列实现淘宝订单全链路效果
需求: 针对淘宝提出的订单全链路产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...
[原] 淘宝SKU组合查询算法实现
前端有多少事情可以做,能做到多好.一直在关注各大公司UED方面的知识,他们也代表了前端的力量,而且也很乐意和大家分享,把应用到项目的知识归类整理,再写成博客搬到网上来,充实这前端的内容,也是为想追寻和 ...

仿制淘宝sku点击效果

仿制淘宝sku点击效果相关推荐

最新文章

热门文章