摘要： $(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、不等于執(zhí)行修改當前自選框div的字體色為橙色
4、等于則執(zhí)行字體色為白色
小結：可以使用點擊事件，也可以使用.hover切換事件來執(zhí)行
*/
//普通點擊事件
$('.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不等于選中，點擊執(zhí)行修改新的class為選中
4、否則當前選擇框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')
}
}
/*全選框按鈕控制總結
1、先獲得每一個單選擇框所在div里i元素的class，并檢測長度賦值給變量
2、然后再獲得每一個單選擇框所在div里i元素的class被選中，獲得長度并賦值
3、然后判斷每一個單選框所在div長度不等于被選中，則是單選框有未選中的，執(zhí)行全選框i元素 不被選中
4、否則長度等于被選中，則執(zhí)行全框框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來做區(qū)分，點擊全選按鈕事件
2、獲得當前全選框i元素的class
3、判斷當前全選框不等于選中，點擊則執(zhí)行選中所有的選擇框
4、判斷當前全選框等于選中，點擊側執(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)
/*加號總結
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觸發(fā)事件而已。
*/
//減號
$('.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也可以
*/
//統(tǒng)計所有勾選的值
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)
}
/*統(tǒng)計所有被勾選div的小計價格累加的值
1、獲取每被選中單選框div 小計的價錢， 通過被選中i元素 的父級div 查找到父級div的同級價格小計div
2、建立存儲總計的變量
3、使用for循環(huán)，判斷被勾選的價格小計div的長度，也就是遍歷整個被勾選的div，并使用innerHTML返回文本內容
4、每調用一次變量，存儲總計變量就+被勾選div的文本值（使用parseFloat篩選到數字到浮點數，屏蔽了字符元；
5、在合計div的輸出總計變量。
注：合計變量必須先在就緒函數后先清零，然后因為全選、單選、數量增加和減少都影響到合計變量，所以需要再這些地方調用合計函數。
*/
})
批改老師：天蓬老師批改時間：2019-03-08 09:33:11
老師總結：實際項目中, 這樣的購買單計算總價操作, 都是采用數據的雙向綁定來實現的, 模型上比這個要簡單些, 有空了解一個vue