動(dòng)態(tài)添加到購(gòu)物車用事件委托的寫(xiě)法及this指向的問(wèn)題
效果圖
image.png
html結(jié)構(gòu)
image.png
image.png
css樣式
image.png
點(diǎn)擊新增按鈕 輸入商品名稱及價(jià)格垦巴，新增商品到table的末尾
image.png
點(diǎn)擊新增按鈕艰垂，新增商品到table的末尾
image.png
由于有新增數(shù)據(jù)所以用事件委托的辦法可以有效的節(jié)省代碼量
因?yàn)橘?gòu)物車需要計(jì)算小計(jì)和總價(jià)，所以我們可以封裝一個(gè)函數(shù)
image.png
封裝加減
image.png
點(diǎn)擊加減锌钮，計(jì)算小計(jì)
直接添加單擊事件，新增的商品欄不可進(jìn)行操作，只有初始的html里存在的可操作
image.png
此時(shí)只需要用事件委托的方法就可以讓新增商品的加減按鈕進(jìn)行操作
父節(jié)點(diǎn).on('事件名','子節(jié)點(diǎn)選擇器','處理函數(shù)')
給加號(hào)添加事件 -->
image.png
給加減同時(shí)添加事件模叙，鏈?zhǔn)綄?xiě)法
image.png
以上加減是正確的方法 這里是錯(cuò)誤寫(xiě)法
image.png
到封裝的函數(shù)里打印一下this
image.png
this指向window，所以這種方法不可取鞋屈，
image.png
復(fù)選框范咨，全選，反選按鈕厂庇，事件委托的寫(xiě)法
image.png
輸入商品名稱和價(jià)格利用回車鍵添加商品
image.png
