小伙伴們，根據(jù)所學(xué)知識，使用JS實現(xiàn)案例中的購物車功能。
效果圖:
任務(wù)要求:
一、擴展document.getElementsByClassName方法。
提示:
1. 判斷是否存在document.getElementsByClassName
2. 如果不存在，使用document.getElementsByTagName('*')結(jié)合className來模擬
二、定義計算函數(shù)getTotal，計算總價格，數(shù)目，并更新已選彈層的HTML。
提示: 1. 遍歷每一行，判斷是否已選。 2.如果已選，分別累加總數(shù)，價格，彈層的HTML。 3. 更新累加結(jié)果。
注意：如果沒有勾選行的時候， 彈層的狀態(tài)。
三、定義小計價格函數(shù)getSubTotal。
提示: 1.接受一個參數(shù)tr，為要計算的行。 2.取得數(shù)目輸入框的值，乘單價。 3. 結(jié)果寫入小計的單元格。
四、綁定每一行勾選框事件。
提示: 1.遍歷每一行，取得勾選框，添加click事件。 2. 判斷是否為全選框，如果是，更新所有勾選框。 3. 如果有一個未選擇，全選框checked為false。
五、綁定已選按鈕事件，用于顯示或者隱藏浮層。
提示: 1. 根據(jù)foot.className來相應(yīng)變化，實現(xiàn)隱藏和顯示。 2. 如果已選項為0，則不顯示。
六、在已選彈層上事件代理，用于刪除已選。
提示: 1.根據(jù)目標元素的class來判斷是否點擊了取消選擇。 2.取得代表行索引的自定義屬性index。 3. 把相應(yīng)的勾選框去掉勾選。 4.手動觸發(fā)勾選框的click事件
注意：勾選框事件的手動觸發(fā)。
七、遍歷每一行，綁定事件。
1）在tr上綁定點擊事件代理
提示: 1.獲取觸發(fā)元素，取得class。 2.如果class為add， 增加數(shù)目，并計算小計價格。 3.如果class為reduce， 減少數(shù)目，并計算小計價格。 4.如果class為delete，刪除相應(yīng)的行。 5. 調(diào)用計算總數(shù)函數(shù)getTotal。
注意：IE下event對象存在window下。
2）綁定數(shù)量輸入框事件，實時更新小計價格
提示: 1.綁定keyup事件。 2.如果輸入框的值不是數(shù)字或者小于1，重置為1。 3.根據(jù)輸入框的值，更新減號的顯示和隱藏。
八、默認勾選所有商品。
提示: 1.更改全選框的checked為true。 2.觸發(fā)全選框的click事件。
任務(wù)要求在上方:
素材地址:
http://img1.sycdn.imooc.com//53b4c12b0001b0a702200220.jpg
http://img1.sycdn.imooc.com//53b4c149000144b202200220.jpg
http://img1.sycdn.imooc.com//53b4c16000011dfd02200220.jpg
參考代碼可在右下角"課件下載"區(qū)下載。
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報