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