最近做了一个商品规格,咱们平时买东西会选择一些譬如:颜色,大小之类的。乍一看,挺简单。但是真正实现起来,突然发现自己对于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更新博客,所以导致好多小伙伴私信我的问题,我都是过了好久才看到,
有不明白的地方,可以微博找我。
微博:璐飞童鞋。关注之后,私信即可。**