zoukankan      html  css  js  c++  java
  • each jquery

            <div class="first">
                <span>投保人数:</span>
                <input type="text" id="people_num" placeholder="预计投保人数" value="1">  人
            </div>
            <div class="first" style="height: auto;">
                <span class="span2">投保方案:</span>
                <div class="button_main">
                    
                        
                        <div class="button" data-price="1000.55">方案一</div>
                        
                        <div class="button" data-price="2000">方案二</div>
                        
                        <div class="button" data-price="3000">方案三</div>
                        
                    
                </div>
            </div>
            <div class="bottom_button" id="to_calculate">
                立即计算
            </div>
    

      

    //计算价格
    function calculation_price(){
        var people_num = parseInt($('#people_num').val());
        if(people_num < 0){
            console.log("人数错误");
            return false;
        }
        if (!$('.button_main div').hasClass('button_selected')){
            $('.button_main .button:first').addClass('button_selected');
        }
    
        $('.button').each(function(index){
            var _this = $(this);
            var _select_price = parseFloat(_this.data('price'));
            if(_this.hasClass('button_selected')){
                var _select_price = parseFloat(_this.data('price'));
                var total_fee = _select_price * people_num;
                $('#total_fee').html(total_fee + '元');
            }
        });
    }
    
    // $(document).on('click','#to_calculate',function () {
    //     $('.calculation_result').fadeIn();
    // });
    
    //点击切换方案
    $(document).on('click','.button',function () {
        if($('.button').has('button_selected')){
            $('.button').removeClass('button_selected');
        }
        $(this).addClass('button_selected');
        calculation_price();
    });
    //变换投保人数
    $(document).on('change','#people_num',function(){
        var people_num = $('#people_num').val();
        console.log(people_num);
        if(!(/(^[1-9]d*$)/.test(people_num))){
            alert("投保人数仅可为正整数");
            $('#people_num').val('1');
            return false;
        }
        calculation_price();
    });
    

      

  • 相关阅读:
    能量项链
    开学前最后一天信奥赛一本通重刷日记
    重刷信奥赛一本通日记-3
    重刷信奥赛一本通日记-2
    重刷信奥赛一本通日记-1
    第二次考试题解way
    第一次考试题解
    第一次考试感言
    「HNOI2012」矿场搭建
    「HAOI2006」受欢迎的牛
  • 原文地址:https://www.cnblogs.com/pansidong/p/8277869.html
Copyright © 2011-2022 走看看