each jquery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | //计算价格 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(); }); |
相信坚持的力量,日复一日的习惯.
分类:
js ,jq
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)