abstract:$(function () { //默认选中第一个 $('.detail_color_left').eq(0).addClass('checked'); $('.detail_much_left').eq(0).addClass('checked'); updateTotalPrice(); changeClass
$(function () { //默认选中第一个 $('.detail_color_left').eq(0).addClass('checked'); $('.detail_much_left').eq(0).addClass('checked'); updateTotalPrice(); changeClass('.detail_much_left', 'checked');//改变版本 changeClass('.detail_color_left', 'checked');//改变颜色 changeClass('.shop_detail_bz1', 'checked', '.shop_detail_button');//服务保障 function changeClass(clickClass, addClass, istrue) { $(clickClass).click(function () { if (!istrue) {//判断第三变量 $(clickClass).removeClass(addClass); $(this).addClass(addClass); } else { $(this).find(istrue).toggleClass(addClass);//class有无取反 } updateTotalPrice(); }); } //统计总价格 function updateTotalPrice() { //版本价钱 var version = parseFloat($(".detail_much_left[class$='checked']").find('span').attr('data-val')); //服务价钱 var serviceNum = $(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]');//选中标签父元素内包含的span标签内data-val的值 var svprice = 0; for (var i = 0; i < serviceNum.length; i++) { svprice += parseFloat(serviceNum[i].getAttribute('data-val')); } //总价值 var totalprice = version + svprice; $('#phonePrice').html(version + '元');//小字 $('#totalPrice').html('总计 : ' + totalprice + '元');//大字 } })
jq重要。而且简单方便,思想和原生js都差不多。
Correcting teacher:天蓬老师Correction time:2019-04-08 10:19:00
Teacher's summary:这个商城,如果我能写出来, 很多传统的页面, 应该都可以应付了