根据不同选择显示不同单价的逻辑

需求：如图所示，根据不同选择呈现不同单价。

代码：html部分 

<div class="box">
            <h3>单价：<span id='price' style="color:orangered;">0</span>元/箱</h3>
            <div class="rongliang">
                <p>容量：</p>
                <span class="small">1000ml</span>
                <span class="big">1500ml</span>
        
            </div>
            <div class="color">
                <p>颜色：</p>
                <span class="black">黑色</span>
                <span class="white">白色</span>
                <span class="opacity">透明色</span>
        
            </div>
            <div class="yinshua">
                <p>印刷：</p>
                <span class="dan">单色印刷</span>
                <span class="shuang">双色印刷</span>
                <span class="duo">多色印刷</span>

            </div>
        </div>

代码：css 部分（手机端部分样式）

 

.box{width: 96%;height: 33rem;border: 0.1rem solid gray;margin:0 auto;font-size:1.6rem;}
.rongliang,.color,.yinshua{height: 8rem;width: 86%;margin: 0.6rem auto;border: 0.1rem solid gray;padding-left: 1rem;;}
.box p{color:rgb(241,104,76)}
.box h3{margin-left:1rem;}
.small,.big,.black,.white,.opacity,.dan,.shuang,.duo{display:block;width: 7rem;float:left;height:2.5rem;line-height:2.5rem;margin-right:0.8rem;text-align: center;border: 0.1rem solid darkgray;}
.clear{clear: both;}

代码：js部分

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    
    <script>
        function nowPrice (rl,col,ys){
            if(rl=='small'&&col=='black'&&ys=='dan'){
                $('#price').html(101);
            }else if(rl=='small'&&col=='black'&&ys=='shuang'){
                $('#price').html(102);    
            }else if(rl=='small'&&col=='black'&&ys=='duo'){
                $('#price').html(103);
            }else if(rl=='small'&&col=='white'&&ys=='dan'){
                $('#price').html(104);        
            }else if(rl=='small'&&col=='white'&&ys=='shuang'){
                $('#price').html(105);    
            }else if(rl=='small'&&col=='white'&&ys=='duo'){
                $('#price').html(106);    
            }else if(rl=='small'&&col=='opacity'&&ys=='dan'){
                $('#price').html(107);    
            }else if(rl=='small'&&col=='opacity'&&ys=='shuang'){
                $('#price').html(108);    
            }else if(rl=='small'&&col=='opacity'&&ys=='duo'){
                $('#price').html(109);
            }else if(rl=='big'&&col=='black'&&ys=='dan'){
                $('#price').html(110);
            }else if(rl=='big'&&col=='black'&&ys=='shuang'){
                $('#price').html(111);    
            }else if(rl=='big'&&col=='black'&&ys=='duo'){
                $('#price').html(112);
            }else if(rl=='big'&&col=='white'&&ys=='dan'){
                $('#price').html(113);
            }else if(rl=='big'&&col=='white'&&ys=='shuang'){
                $('#price').html(114);    
            }else if(rl=='big'&&col=='white'&&ys=='duo'){
                $('#price').html(115);    
            }else if(rl=='big'&&col=='opacity'&&ys=='dan'){
                $('#price').html(116);    
            }else if(rl=='big'&&col=='opacity'&&ys=='shuang'){
                $('#price').html(117);    
            }else if(rl=='big'&&col=='opacity'&&ys=='duo'){
                $('#price').html(118);    
            }else{
                console.log('请检查代码是否有误');
            }
        }
                
        $('.rongliang,.color,.yinshua').on('click','span',function(){
            $(this).css('color','orangered').siblings('span').css('color','black');
        })
        var choice = {};
        $('.rongliang').on('click','span',function(){
            var rl = $(this)[0].className;
                choice.rongliang = rl;
                console.log(choice);
                if(choice.rongliang&&choice.color&&choice.cyinshua){
                    nowPrice(choice.rongliang,choice.color,choice.cyinshua);
                }
        })
        $('.color').on('click','span',function(){
            var col = $(this)[0].className;
                choice.color = col;
                console.log(choice);
                if(choice.rongliang&&choice.color&&choice.cyinshua){
                    nowPrice(choice.rongliang,choice.color,choice.cyinshua);
                }
        })
        $('.yinshua').on('click','span',function(){
            var ys = $(this)[0].className;
                choice.cyinshua = ys;
                console.log(choice);
                if(choice.rongliang&&choice.color&&choice.cyinshua){
                    nowPrice(choice.rongliang,choice.color,choice.cyinshua);
                }
        })
    
    </script>

主要思路：创建一个对象，点击的时候给它添加属性，分别是rongliang,color,cyinshua，选择不同添加的属性值也不同。每次点击完成后判断这三个属性是否全部存在，当三个属性都存在的时候说明三个值都已经选好了，此时就可以给出单价了。然后写一个函数，根据该对象属性值不同，匹配不同的单价，并显示到页面相应位置。

 个人理解，欢迎大家提供不同思路。

 

转载于:https://www.cnblogs.com/AliceMa/p/7844335.html