摘要： $(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')
}
)
/*思路總結(jié)：
1、所有的自選框都是使用同樣的字體庫進(jìn)行引入；
2、首先獲取當(dāng)前自選框的claSS 判斷不等于選中的class；
3、不等于執(zhí)行修改當(dāng)前自選框div的字體色為橙色
4、等于則執(zhí)行字體色為白色
小結(jié)：可以使用點(diǎn)擊事件，也可以使用.hover切換事件來執(zhí)行
*/
//普通點(diǎn)擊事件
$('.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：三目運(yùn)算符
$(this).attr('class')!='fa fa-check checked'?$(this).attr('class','fa fa-check checked'):$(this).attr('class','fa fa-check');
doCheckAll()
doPrice()
})
/*普通點(diǎn)擊事件總結(jié)
1、首先獲取返回當(dāng)前選擇框的class
2、然后判斷是否選中
3、如果當(dāng)前選擇框class不等于選中，點(diǎn)擊執(zhí)行修改新的class為選中
4、否則當(dāng)前選擇框class等于選中，則執(zhí)行修改新的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')
}
}
/*全選框按鈕控制總結(jié)
1、先獲得每一個(gè)單選擇框所在div里i元素的class，并檢測(cè)長(zhǎng)度賦值給變量
2、然后再獲得每一個(gè)單選擇框所在div里i元素的class被選中，獲得長(zhǎng)度并賦值
3、然后判斷每一個(gè)單選框所在div長(zhǎng)度不等于被選中，則是單選框有未選中的，執(zhí)行全選框i元素 不被選中
4、否則長(zhǎng)度等于被選中，則執(zhí)行全框框i元素被選中。
5、因?yàn)楸闅v的整個(gè)list-item單選框，所以需要再普通點(diǎn)擊事件調(diào)用此函數(shù)。
*/
//全選點(diǎn)擊事件
$('#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 三目運(yùn)算
$(this).attr('class')!='fa fa-check checked'?$('.fa-check').attr('class','fa fa-check checked'):$('.fa-check').attr('class','fa fa-check');
doPrice()
})
/*全選點(diǎn)擊事件總結(jié)
1、所有的選擇框都是通過i元素引用字體庫來實(shí)現(xiàn)的，所以他們的class名是一致的，所以全選使用了id來做區(qū)分，點(diǎn)擊全選按鈕事件
2、獲得當(dāng)前全選框i元素的class
3、判斷當(dāng)前全選框不等于選中，點(diǎn)擊則執(zhí)行選中所有的選擇框
4、判斷當(dāng)前全選框等于選中，點(diǎn)擊側(cè)執(zhí)行不選中所有選擇框
*/
//加減按鈕
$('.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)
/*加號(hào)總結(jié)
1、找到加號(hào)的class做點(diǎn)擊事件
2、當(dāng)前的加號(hào)通過siblings獲得指定同胞元素input，并通過val獲得value值，并賦值給變量
3、此時(shí)返回的value值是文本，需要使用parseInt 轉(zhuǎn)換成數(shù)字整數(shù)并賦值給變量
4、再建立一個(gè)存儲(chǔ)value值的變量為0，然后每點(diǎn)擊一次就+前面value的值。
5：獲取指定同級(jí)元素的value值，然后轉(zhuǎn)換成數(shù)字整數(shù)，然后點(diǎn)擊一次+1.
注：獲取指定同級(jí)元素的value值，然后轉(zhuǎn)換成數(shù)字整數(shù)，點(diǎn)擊一次value值+1
*/
//獲取商品單價(jià)
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()
})
獲取商品單價(jià)
1、當(dāng)前的加號(hào)使用parents找到指定的父級(jí)，然后通過指定父級(jí)找到父級(jí)同級(jí)元素并返回元素內(nèi)容，
然后使用parseFloat取數(shù)字部分，賦值給單價(jià)；
2、使用value數(shù)量值*單價(jià) 就是小計(jì)，然后找到小計(jì)的 div修改值就行。
注：就是尋找加號(hào)和單價(jià)關(guān)系，使用指定父級(jí)、同級(jí)、或者祖先、子元素，只要能找到單價(jià)獲得元素內(nèi)容，
并剔除文字 解析出數(shù)字。
減號(hào)獲取商品單價(jià)也是一樣的，只是點(diǎn)擊的減號(hào)div觸發(fā)事件而已。
*/
//減號(hào)
$('.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)
//獲取商品單價(jià)
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()
})
/*減號(hào)總結(jié)
1、獲得當(dāng)前減號(hào)的同級(jí)input框的value值，此時(shí)值為文本賦值給變量，
2、使用parseInt把文本值轉(zhuǎn)換成數(shù)字整數(shù)
3、定義一個(gè)現(xiàn)實(shí)結(jié)果的變量
4、判斷value值是否小于等于1，如果小于等于1的時(shí)，則結(jié)果變量為1。
5、如果value值大于1，則結(jié)果變量就-1
6、最后找到當(dāng)前的input框修改value值為結(jié)果變量
獲取指定同級(jí)元素的value值，然后轉(zhuǎn)換成數(shù)字整數(shù)，然后判斷是否小于等于1，小于等于則為1，大于點(diǎn)擊一次+1 使用if else也可以
*/
//統(tǒng)計(jì)所有勾選的值
function doPrice(){
var checkeditems=$('.list-item i[class$="checked"]').parents('.select').siblings('.good-total-price')//選中小計(jì)的價(jià)錢
var totalprice=0//儲(chǔ)存總計(jì)
for(var i=0;i<checkeditems.length;i++){
totalprice+=parseFloat(checkeditems[i].innerHTML)
}
$('.sum-price').html(totalprice)
//獲取每一個(gè)單選框i元素的class 賦值給變量items
var items=$('.list-item i[class*="fa-check"]')
//選中多少件（選中小計(jì)div的數(shù)量的長(zhǎng)度）
$('.select-count').html(checkeditems.length)
//總商品數(shù)（每一個(gè)單選框的長(zhǎng)度）
$('.all-count').html(items.length)
}
/*統(tǒng)計(jì)所有被勾選div的小計(jì)價(jià)格累加的值
1、獲取每被選中單選框div 小計(jì)的價(jià)錢， 通過被選中i元素 的父級(jí)div 查找到父級(jí)div的同級(jí)價(jià)格小計(jì)div
2、建立存儲(chǔ)總計(jì)的變量
3、使用for循環(huán)，判斷被勾選的價(jià)格小計(jì)div的長(zhǎng)度，也就是遍歷整個(gè)被勾選的div，并使用innerHTML返回文本內(nèi)容
4、每調(diào)用一次變量，存儲(chǔ)總計(jì)變量就+被勾選div的文本值（使用parseFloat篩選到數(shù)字到浮點(diǎn)數(shù)，屏蔽了字符元；
5、在合計(jì)div的輸出總計(jì)變量。
注：合計(jì)變量必須先在就緒函數(shù)后先清零，然后因?yàn)槿x、單選、數(shù)量增加和減少都影響到合計(jì)變量，所以需要再這些地方調(diào)用合計(jì)函數(shù)。
*/
})
批改老師：天蓬老師批改時(shí)間：2019-03-08 09:33:11
老師總結(jié)：實(shí)際項(xiàng)目中, 這樣的購買單計(jì)算總價(jià)操作, 都是采用數(shù)據(jù)的雙向綁定來實(shí)現(xiàn)的, 模型上比這個(gè)要簡(jiǎn)單些, 有空了解一個(gè)vue