前端布局实战介绍
05分钟49秒首页布局分解(1)
12分钟12秒首页布局分解(2)
14分钟31秒首页布局分解(3)
18分钟05秒首页布局分解(4)
24分钟00秒商城底部布局(1)
23分钟57秒商城底部布局(2)
16分钟26秒商城导航分解(顶部导航)
19分钟46秒商城导航分解(下拉菜单1)
29分钟23秒商城导航分解(下拉菜单2)
23分钟52秒商城导航分解(侧边栏竖导航)
26分钟32秒页面小导航
21分钟21秒商城主体内容布局详解(1)
22分钟53秒商城主体内容布局详解(2)
20分钟35秒商城主体内容布局详解(3)
12分钟27秒小米商城登录页面布局(1)
26分钟38秒小米商城登录页面布局(2)
23分钟58秒小米商城登录页面(js实现切换效果)
09分钟44秒商品详情页面布局(1)
26分钟37秒商品详情页面布局(2)
42分钟37秒商品详情页面(jQuery效果)
39分钟07秒实现购物车商品全选
21分钟59秒实现购物车商品数量加减及小计商品总价
16分钟43秒统计购物车所有勾选商品的总价
19分钟52秒小米商城布局总结
06分钟20秒过儿5年前
$(function(){ //鼠标移上变色 $('.fa-check-square').mouseover(function(){ if($(this).attr('class')!='fa fa-check-square checked'){ $(this).css('color','#ff6700'); } }) $('.fa-check-square').mouseleave(function(){ $(this).css('color','#fff'); }) //单选中效果 $('.fa-check-square').click(function(){ var cla=$(this).attr('class'); if(cla!='fa fa-check-square checked'){ $(this).attr('class','fa fa-check-square checked'); }else{ $(this).attr('class','fa fa-check-square'); } checkAll(); }) //全选效果 $('#select_all').click(function(){ var cla=$(this).attr('class'); if(cla!='fa fa-check-square checked'){ $('.fa-check-square').attr('class','fa fa-check-square checked'); }else{ $('.fa-check-square').attr('class','fa fa-check-square'); } }) //检查是否全选 function checkAll(){ var allitem=$('.list_item span[class*="fa-check-square"]').length; var checkeditem=$('.list_item span[class$="checked"]').length; if(allitem!=checkeditem){ $('#select_all').attr('class','fa fa-check-square'); }else{ $('#select_all').attr('class','fa fa-check-square checked'); } } //实现加法 $('.add').click(function(){ var nowvalue=$(this).siblings('input').val(); var nowvalue=parseInt(nowvalue); var currentvalue=0; var currentvalue=nowvalue+1; $(this).siblings('input').val(currentvalue); var per_price=$(this).parents('.cal_num').siblings('.per_price').children('p').html(); var per_price=parseFloat(per_price); var total_price=per_price*currentvalue; $(this).parents('.cal_num').siblings('.total_price').children('p').html(total_price+'元'); }) //实现剪法 $('.sub').click(function(){ var nowvalue=$(this).siblings('input').val(); var nowvalue=parseInt(nowvalue); var currentvalue=nowvalue; if(currentvalue>1){ currentvalue=nowvalue-1; }else{ currentvalue=1; } $(this).siblings('input').val(currentvalue); var per_price=$(this).parents('.cal_num').siblings('.per_price').children('p').html(); var per_price=parseFloat(per_price); var total_price=per_price*currentvalue; $(this).parents('.cal_num').siblings('.total_price').children('p').html(total_price+'元'); }) })
0
hiki19875年前
//加减按钮 // siblings('input').val() 用于匹配input框里的val属性 $('.plus').click(function(){ var nowvalue=$(this).siblings('input').val() var nowvalue=parseInt(nowvalue) //把input框里的文本类型转换成整数parseInt // var currentvalue=0 //做下清零,加号这里可以不用,减号那里必须有 var currentvalue=nowvalue+1 $(this).siblings('input').val(currentvalue) // 前台单价的里面是3199元,有个中文,用parseFloat()方法只取数字 /*parents() 获得当前匹配元素集合中每个元素的祖先元素,这里是获取good-num的 祖先元素下的good-price里的html值*/ var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html()) var xiaoji=danjia*currentvalue //在页面中输出 $(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元') }) $('.minus').click(function(){ var nowvalue=$(this).siblings('input').val() var nowvalue=parseInt(nowvalue) //把input框里的文本类型转换成整数parseInt var currentvalue=0 //做下清零,加号这里可以不用,减号那里必须有 /*三元运算符(nowvalue<=1?)小于等于1就设置为1(?currentvalue=1) 否则:currentvalue=nowvalue-1 (nowvalue可以减-1)*/ nowvalue<=1?currentvalue=1:currentvalue=nowvalue-1 $(this).siblings('input').val(currentvalue) var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html()) var xiaoji=danjia*currentvalue //在页面中输出 $(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元') })
1