購物車功能事件委託優化

2021-09-29 21:15:22 字數 1100 閱讀 3382

利用dom樹查詢元素做的簡易購物車功能簡易購物車

無法動態的新增購物車內商品的數量,事件委託/冒泡可以進一步優化:

//因為table中所有按鈕都需要能單擊,所以,應該將單擊事件統一繫結在父元素table上一次即可

var table=document.

getelementbyid

("data");

table.

onclick

=function

(e)else

if(n>1)

span.innerhtml=n;

var td=thisbtn.parentnode.nextelementsibling;

//4. 修改元素

var price=

parsefloat

( thisbtn.parentnode//當前td

.previouselementsibling

//前乙個兄弟td

.innerhtml//"¥4488.00"

.slice(1

)//"4488.00");

//4488

td.innerhtml=`¥$

`;/*算總價*/

//總價=每行最後乙個td中的小計的和

//獲得tbody中每行最後乙個td

var tds=table.

queryselectorall

("tbody td:last-child");

console.

log(tds)

;var total=0;

//遍歷每行最後乙個td

for(

var td of tds)

//將累加的和賦值給tfoot中的最後乙個td

var lasttd=table.

queryselector

("tfoot td:last-child");

lasttd.innerhtml=`¥$

`;}}

<

/script>

總結:只要把整個table繫結乙個事件,當元素的nodename是button時執行函式內操作。

購物車功能實現

大神跟我說學好基本的jquery只需要做好三個基本功能就好了,第乙個是購物車。現在開始實踐,css神馬的就忽略簡單點了。其實這個主要就是dom操作和選擇器的應用。大神果然比較牛。product number price choose120 2100350 410product number pric...

vant實現購物車功能

做一些電商或者支付頁面 肯定少不了購物車功能 一方面正反選 另一方面動態 全選之後再去加減商品數量 這裡必須考慮 裡面有很多蛋疼的問題 猛的一想 感覺思路很清晰 但是 真正動起手來 就各種bug出來了 說實話 搞這個購物車 浪費我整整一下午的時間 當我回過頭捋一遍 其實 半小時就能完事。就是因為全選...

jquery加購物車功能

如下圖所示 點選加入購物車,由下到上出現此彈窗,點選close關閉彈窗。addcar on click function 500 10 關閉按鈕 dialog close on click function 600 dialog content eq 0 animate 500 初始化有預設選中,有...