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

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

 

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

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

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

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

HTML部分：

<div class="container">
        <div class='box1'>
            <img id="src" src="img/phone/Xiaomi Civi.jpg" style="margin: top 10px;">
            <img id="src" src="img/phone/Xiaomi Civi.jpg" style="margin: top 10px;">
        </div>
        <div class="box2">
            <p>商品类别：<span id='type'>小米手机</span></p>
            <p>商品名称：<span id='name'>Xiaomi Civi</span></p>
            <p>售价：¥<span id='price'>2599</span></p>
            <div>
                <p>选择版本</p>
                <button id="et" class="box2Edition">8GB+128GB</button>
                <button id="em" class="box2Edition">12GB+256GB</button>
                <button id="eb" class="box2Edition">8GB+256GB</button>
            </div>
            <div>
                <p>选择颜色</p>
                <button class="box2Color">闪闪黑</button>
                <button class="box2Color">轻轻蓝</button>
                <button class="box2Color">怦怦粉</button>
            </div>
            <div>
                <p>选择套装</p>
                <button id="Suit1" class="box2Suit">标准版</button>
                <button id="Suit2" class="box2Suit">套装版(赠充电器)</button>
            </div>
            <br>
            <button id="cart" class="buy" style="width: 320px;height: 60px;margin-bottom: 5px;margin-top: 10px;" size=''
                goodsid=''>加入购物车</button>
            <br>
            <button class="btn2"><a href="cart.html">去购物车看看</a></button>
            <button class="btn3"><a href="index.html">返回首页</a></button>
        </div>
    </div>

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;
                }
            }
        }

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