前端如何实现商品规格

最新推荐文章于 2024-03-28 16:52:39 发布

原创最新推荐文章于 2024-03-28 16:52:39 发布 · 9.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #商品规格-数组

web前端同时被 2 个专栏收录

31 篇文章

订阅专栏

数组-商品规格

1 篇文章

订阅专栏

本文探讨了在前端开发中实现商品规格选择的过程，强调了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);

                        }

                    });

                }

            }

        }