前端如何实现商品规格

最近做了一个商品规格，咱们平时买东西会选择一些譬如：颜色，大小之类的。乍一看，挺简单。但是真正实现起来，突然发现自己对于JS的数组掌握的不是特别好。同时也明白了，学好JS数组很重要，学好JS数组很重要，学好JS数组很重要。这个必须要说三遍。因为我当时学习JS的时候，不知道为何，心里有点排斥它。所以，工作中，它会狠狠的报复你！开个玩笑，不过，数组真的要好好掌握。

这是即将要做的规格：先来说一下实现的逻辑：
先设置两个数组：
[已经选择的数组]，[可以选择的数组]
1.找到已经选择的元素。放到数组中。
2.在所有的元素中匹配已经选择的，匹配失败的从所有元素中删除。并将剩下的元素推到可以选择的数组中。最后可以确定唯一的一个商品，这样就完成了商品规格。
.话不多说贴代码：

 var a = $(this);var valid= a.attr("data-valid");var attrid=a.attr("data-attrid");choosedArr.push({'valid':valid,'attrid':attrid});canChooseArr.length = 0;if(a.hasClass('selected')){$.each(choosedArr,function(i){if(i.valid==valid && i.attrid==attrid){choosedArr.remove(i.valid);choosedArr.remove(i.attrid);}});var removeIndexStr = "";//已经选择的与全局信息匹配，不符合条件的删除for(var k=0;k<choosedArr.length;k++) {$.each(temp,function(i) {var isequal = false;$.each(temp[i].attributes,function(j,v){if(v.attrid==choosedArr[k].attrid && v.valid==choosedArr[k].valid){isequal = true;return false;}});if(!isequal){removeIndexStr += i +",";}});}//找到所有的规格，通过下标删除不符合条件的元素for(var i=0; i< removeIndexStr.split(',').length;i++){//从temp数组中移除第i个元素/*temp.splice(i,1);*/delete temp[removeIndexStr.split(',')[i]];}for(var i=0;i<temp.length;i++){if(temp[i]==undefined){}else{wcode=temp[i].wcode;$.each(waresku.skus,function(i){if(wcode==waresku.skus[i].wcode){$page.find("#itmetitle").siblings().children('.baseprice').text(waresku.skus[i].baseprice);$page.find("#itmetitle").siblings().children('.saleprice').text(waresku.skus[i].saleprice);$page.find("#itmetitle").siblings().children('.stock').text(waresku.skus[i].stock);choosedArr.splice(0,choosedArr.length);}});}}}else{$(this).toggleClass('selected').parent().siblings('.dd').children().removeClass('selected');//所有规格信息var temp = waresku.skuitem.concat();//删除信息的下标var removeIndexStr = "";//已经选择的与全局信息匹配，不符合条件的删除for(var k=0;k<choosedArr.length;k++) {$.each(temp,function(i) {var isequal = false;$.each(temp[i].attributes,function(j,v){if(v.attrid==choosedArr[k].attrid && v.valid==choosedArr[k].valid){isequal = true;return false;}});if(!isequal){removeIndexStr += i +",";}});}//找到所有的规格，通过下标删除不符合条件的元素for(var i=0; i< removeIndexStr.split(',').length;i++){//从temp数组中移除第i个元素/*temp.splice(i,1);*/delete temp[removeIndexStr.split(',')[i]];}for(var i=0;i<temp.length;i++){if(temp[i]==undefined){}else{wcode=temp[i].wcode;$.each(waresku.skus,function(i){if(wcode==waresku.skus[i].wcode){$page.find("#itmetitle").siblings().children('.baseprice').text(waresku.skus[i].baseprice);$page.find("#itmetitle").siblings().children('.saleprice').text(waresku.skus[i].saleprice);$page.find("#itmetitle").siblings().children('.stock').text(waresku.skus[i].stock);choosedArr.splice(0,choosedArr.length);}});}}}

这里边有一个问题，非常值得注意：当不符合条件的删除后，数组的长度会发生改变，这时数组就会混乱。所以删除数组的时候，我用到了delete arr方法，它不会改变数组的长度。已经删除的，下标会变成undefined.

**发现一个问题就是，我是整理近期问题才会来csdn更新博客，所以导致好多小伙伴私信我的问题，我都是过了好久才看到，
有不明白的地方，可以微博找我。
微博：璐飞童鞋。关注之后，私信即可。**

前端如何实现商品规格相关推荐

HH SaaS电商系统移动端商城，买家选择商品规格的交互设计
文章目录未完整选择商品规格时商品图如何显示库存如何显示价格如何显示选择规格提示文案如何显示原型图已选完整选择商品规格时商品图如何显示库存如何显示价格如何显示原型图 SKU下架后如 ...
乐优商城（四）商品规格管理
文章目录 1. 商品规格 1.1 SPU 和 SKU 1.2 分析商品规格的关系 1.3 数据库设计 1.3.1 商品规格组表 1.3.2 商品规格参数表 2. 商品规格组 2.1 商品规格组前端 2 ...
商品规格sku算法应用
近期在做商城商品规格这个模块,规格联动这边看似简单,实则坑(学问)深着呢.只怪自己轻视了它,未经思考便上手,于是越写越棘手,越绕越晕... 两天后,成功地把自己套牢,写不下去了. 上网寻找,看了淘宝S ...
乐优商城学习笔记五-商品规格管理
0.学习目标了解商品规格数据结构设计思路实现商品规格查询了解SPU和SKU数据结构设计思路实现商品查询了解商品新增的页面实现独立编写商品新增后台功能 1.商品规格数据结构乐优商城是一个全 ...
iOS 走近商城 APP(三 WKWebView 商品规格选择框架封装)
原文链接:http://www.jianshu.com/p/293ee1bfe104 商城 -- 由 3033 分享开篇忽然发现最近也只有值班才能写东西了,中间更新了两篇其他的断了下商城相关的文章 ...
商品规格可选怎么设计_商品模块数据库表解析（一）
本文主要对商品分类.品牌管理.商品类型这三个功能的表进行解析,采用功能与表结构对照的形式.表解析只会标注一些需要理解的字段,简单字段请自行对照表注释. SpringBoot实战电商项目mall(25k ...
有赞vant_vue+有赞vant的商品规格sku记录-小程序
vant-vue关于sku规格是说明,并不详情,从手册复制无法使用.git下载安装vant后的sku示例却很详情. 我剔除了高级用法,以下是基础用法示例: sku.vue文件 <template ...
java 开发之商品规格属性（SKU）组合算法
java 开发之商品规格属性(SKU)组合算法开发背景一般在开发商城的时候都会遇到商品规格组合的问题, 在这个开发过程中就需要一套算法用来组合多个规格属性,用来给每个组合定一组封面图和价格比如某 ...
【电商业务】外行为何难区别商品属性与商品规格
商品属性与商品规格 1. 商品基本规格与销售属性的概念商品基本规格属性:指不影响商品实际销售价格的属性,只充当解释说明的一系列属性键值对,增强用户对该商品的认识程度,以增加购买欲望. 商品销售属性: ...

前端如何实现商品规格

前端如何实现商品规格相关推荐

最新文章

热门文章