大型企业站，小米商城官网，纯html，css，原生js实现过程中的小问题

最近在写小米商城官网的时候遇见了一个解决了很久的小问题：在商品详情页选择不同手机版本和颜色以及套装的时候实现三者之间，不同组合价格的不同的联动效果。

 

 解决思路（这里默认选择哪个颜色都不影响价格，并且套装版比标准版贵100的情况）：

1、先单独给选择版本下的三个按钮单独添加一个id，通过id判断用户点击的是哪个按钮，从而显示不同的价格

2、再单独给选择套装下的三个按钮单独添加一个id，通过id判断用户点击的是哪个按钮，由于这些demo都是写在对应的点击事件里面的，所以，我们需要在事件外面设置一个变量，来限定用户在不同的版本之间进行来回选择时，价格能对应上，并且确保不会出现因为用户同一个版本选项点击多次，价格也增加多次的现象。

附上原demo（这里只放HTML和js代码，CSS部分暂略）：

HTML部分：

        

            
            
        
        

            
商品类别：小米手机
            
商品名称：Xiaomi Civi
            
售价：¥2599
            

                
选择版本
                8GB+128GB
                12GB+256GB
                8GB+256GB
            
            

                
选择颜色
                闪闪黑
                轻轻蓝
                怦怦粉
            
            

                
选择套装
                标准版
                套装版(赠充电器)
            
            

            加入购物车
            

            去购物车看看
            返回首页
        
    

js部分：

 var box2Edition = document.querySelectorAll('.box2Edition');
        var box2Color = document.querySelectorAll('.box2Color');
        var box2Suit = document.querySelectorAll('.box2Suit');
        var Suit2 = document.querySelector('#Suit2');
        let num = 0;

        //选择颜色
        for (i = 0; i < box2Color.length; i++) {
            box2Color[i].onclick = function () {
                for (j = 0; j < box2Color.length; j++) {
                    // console.log(this);
                    box2Color[j].style.border = '0.5px solid gainsboro';
                    box2Color[j].style.color = 'black';

                }
                this.style.border = '1.8px solid orange';
                this.style.color = 'orange';
                // console.log(this);
                // console.log(this.style.background);
                // console.log(this);
                // if (this.style.background == 'white') {
                //     this.style.background = "#ff6700";
                // } else {
                //     this.style.background = 'white';
                // }
            }
        }


        //选择套装
        for (i = 0; i < box2Suit.length; i++) {
            box2Suit[i].onclick = function () {
                for (j = 0; j < box2Suit.length; j++) {
                    // console.log(this);
                    box2Suit[j].style.border = '0.5px solid gainsboro';
                    box2Suit[j].style.color = 'black';


                }
                this.style.border = '1.8px solid orange';
                this.style.color = 'orange';

                //对不同版本进行不同价格的判断

                if (this.id == 'Suit1') {
                    num = 0;
                }
                //限定只有num=0时才进行下面的判断
                if (num == 0) {
                    if (this.id == 'Suit2') {
                        price.innerHTML = price.innerHTML - 0 + 100;
                        //此时让num不等于0，就不会重复进行判断，价格也就不会点一次就加一次
                        num++;
                    }
                    //失去焦点时，恢复原来价格
                    Suit2.onblur = function () {
                        price.innerHTML = price.innerHTML - 0 - 100;
                    }
                }
            }
        }

        //选择版本
        for (i = 0; i < box2Edition.length; i++) {
            box2Edition[i].onclick = function () {
                for (j = 0; j < box2Edition.length; j++) {
                    // console.log(this);
                    box2Edition[j].style.border = '0.5px solid gainsboro';
                    box2Edition[j].style.color = 'black';

                }
                this.style.border = '1.8px solid orange';
                this.style.color = 'orange';

                if (this.id == 'et') {
                    price.innerHTML = 2599;

                } else if (this.id == 'em') {
                    price.innerHTML = 3599;
                } else {
                    price.innerHTML = 4599;
                }
            }
        }

这样初步能够实现基本效果，其余不足之处欢迎各位大佬指正交流~~~~