摘要： $(document).ready(function(){ doPrice() /*移上变橙色方法1： $('.fa-check').mouseover(function(){ &
$(document).ready(function(){
doPrice()
/*移上变橙色方法1：
$('.fa-check').mouseover(function(){
if($(this).attr!="fa fa-check checked"){
$(this).css('color','#ff6700')
}
})
移开背景色变白
$('.fa-check').mouseleave(function(){
if($(this).attr!="fa fa-check checked"){
$(this).css('color','#fff')
}
})*/
//方法2：
$('.fa-check').hover(
function(){
if($(this).attr('class')!="fa fa-check checked"){
$(this).css('color','#ff6700')
}
},
function(){
$(this).css('color','#fff')
}
)
/*思路总结：
1、所有的自选框都是使用同样的字体库进行引入；
2、首先获取当前自选框的claSS 判断不等于选中的class；
3、不等于执行修改当前自选框div的字体色为橙色
4、等于则执行字体色为白色
小结：可以使用点击事件，也可以使用.hover切换事件来执行
*/
//普通点击事件
$('.fa-check').click(function(){
/*方法1
var cla=$(this).attr('class');
var cla1='fa fa-check checked';
if(cla!=cla1){
$(this).attr('class','fa fa-check checked');
}else{
$(this).attr('class','fa fa-check')
}*/
//方法2：三目运算符
$(this).attr('class')!='fa fa-check checked'?$(this).attr('class','fa fa-check checked'):$(this).attr('class','fa fa-check');
doCheckAll()
doPrice()
})
/*普通点击事件总结
1、首先获取返回当前选择框的class
2、然后判断是否选中
3、如果当前选择框class不等于选中，点击执行修改新的class为选中
4、否则当前选择框class等于选中，则执行修改新的class为不选中
*/
//全选框按钮控制
function doCheckAll(){
var allitem=$('.list-item i[class*="fa-check"]').length
var checkeditem=$('.list-item i[class$="checked"]').length
if(allitem!=checkeditem){
$('#check-all').attr('class','fa fa-check')
}else{
$('#check-all').attr('class','fa fa-check checked')
}
}
/*全选框按钮控制总结
1、先获得每一个单选择框所在div里i元素的class，并检测长度赋值给变量
2、然后再获得每一个单选择框所在div里i元素的class被选中，获得长度并赋值
3、然后判断每一个单选框所在div长度不等于被选中，则是单选框有未选中的，执行全选框i元素 不被选中
4、否则长度等于被选中，则执行全框框i元素被选中。
5、因为遍历的整个list-item单选框，所以需要再普通点击事件调用此函数。
*/
//全选点击事件
$('#check-all').click(function(){
/* var cla=$(this).attr('class');
var cla=$(this).attr('class')
var cla1='fa fa-check checked';
if(cla!=cla1){
$('.fa-check').attr('class','fa fa-check checked');
}else{
$('.fa-check').attr('class','fa fa-check');
}
*/
//方法2 三目运算
$(this).attr('class')!='fa fa-check checked'?$('.fa-check').attr('class','fa fa-check checked'):$('.fa-check').attr('class','fa fa-check');
doPrice()
})
/*全选点击事件总结
1、所有的选择框都是通过i元素引用字体库来实现的，所以他们的class名是一致的，所以全选使用了id来做区分，点击全选按钮事件
2、获得当前全选框i元素的class
3、判断当前全选框不等于选中，点击则执行选中所有的选择框
4、判断当前全选框等于选中，点击侧执行不选中所有选择框
*/
//加减按钮
$('.plus').click(function(){
var nowvalue=$(this).siblings('input').val()
var nowvalue=parseInt(nowvalue)
var currentvalue=0
var currentvalue=nowvalue+1
$(this).siblings('input').val(currentvalue)
/*加号总结
1、找到加号的class做点击事件
2、当前的加号通过siblings获得指定同胞元素input，并通过val获得value值，并赋值给变量
3、此时返回的value值是文本，需要使用parseInt 转换成数字整数并赋值给变量
4、再建立一个存储value值的变量为0，然后每点击一次就+前面value的值。
5：获取指定同级元素的value值，然后转换成数字整数，然后点击一次+1.
注：获取指定同级元素的value值，然后转换成数字整数，点击一次value值+1
*/
//获取商品单价
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+'元')
doPrice()
})
获取商品单价
1、当前的加号使用parents找到指定的父级，然后通过指定父级找到父级同级元素并返回元素内容，
然后使用parseFloat取数字部分，赋值给单价；
2、使用value数量值*单价 就是小计，然后找到小计的 div修改值就行。
注：就是寻找加号和单价关系，使用指定父级、同级、或者祖先、子元素，只要能找到单价获得元素内容，
并剔除文字 解析出数字。
减号获取商品单价也是一样的，只是点击的减号div触发事件而已。
*/
//减号
$('.minus').click(function(){
var nowvalue=$(this).siblings('input').val()
var nowvalue=parseInt(nowvalue)
var currentvalue=0
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+'元')
doPrice()
})
/*减号总结
1、获得当前减号的同级input框的value值，此时值为文本赋值给变量，
2、使用parseInt把文本值转换成数字整数
3、定义一个现实结果的变量
4、判断value值是否小于等于1，如果小于等于1的时，则结果变量为1。
5、如果value值大于1，则结果变量就-1
6、最后找到当前的input框修改value值为结果变量
获取指定同级元素的value值，然后转换成数字整数，然后判断是否小于等于1，小于等于则为1，大于点击一次+1 使用if else也可以
*/
//统计所有勾选的值
function doPrice(){
var checkeditems=$('.list-item i[class$="checked"]').parents('.select').siblings('.good-total-price')//选中小计的价钱
var totalprice=0//储存总计
for(var i=0;i<checkeditems.length;i++){
totalprice+=parseFloat(checkeditems[i].innerHTML)
}
$('.sum-price').html(totalprice)
//获取每一个单选框i元素的class 赋值给变量items
var items=$('.list-item i[class*="fa-check"]')
//选中多少件（选中小计div的数量的长度）
$('.select-count').html(checkeditems.length)
//总商品数（每一个单选框的长度）
$('.all-count').html(items.length)
}
/*统计所有被勾选div的小计价格累加的值
1、获取每被选中单选框div 小计的价钱， 通过被选中i元素 的父级div 查找到父级div的同级价格小计div
2、建立存储总计的变量
3、使用for循环，判断被勾选的价格小计div的长度，也就是遍历整个被勾选的div，并使用innerHTML返回文本内容
4、每调用一次变量，存储总计变量就+被勾选div的文本值（使用parseFloat筛选到数字到浮点数，屏蔽了字符元；
5、在合计div的输出总计变量。
注：合计变量必须先在就绪函数后先清零，然后因为全选、单选、数量增加和减少都影响到合计变量，所以需要再这些地方调用合计函数。
*/
})
批改老师：天蓬老师批改时间：2019-03-08 09:33:11
老师总结：实际项目中, 这样的购买单计算总价操作, 都是采用数据的双向绑定来实现的, 模型上比这个要简单些, 有空了解一个vue
