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