前端如何实现商品规格

本文探讨了在前端开发中实现商品规格选择的过程,强调了JavaScript数组操作的重要性。通过设置已选和可选数组,根据用户选择更新数组并确保唯一商品匹配。在操作过程中,遇到数组长度变化导致的混乱问题,采用delete方法避免了这一问题。作者提醒,对JS数组的深入理解在实际工作中至关重要,并鼓励读者在遇到疑问时通过微博联系。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值