在電商類(lèi)項(xiàng)目中，購(gòu)物車(chē)可以說(shuō)是基本要求了。購(gòu)物車(chē)的綜合功能能以及邏輯功能對(duì)學(xué)習(xí)階段的人來(lái)說(shuō)都能或多或少的提升js知識(shí)，鍛煉論及能力。購(gòu)物車(chē)中主要分為全選、店鋪、單選、價(jià)格幾大類(lèi)。javascript實(shí)現(xiàn)購(gòu)物車(chē)功能，每個(gè)人的編寫(xiě)邏輯風(fēng)格不同，在此使用以下布局方式。

其中全選的input放在div.all中單放，使用dl包裹一個(gè)店鋪中的所有商品，可以都多個(gè)dl包裹不同的店鋪。在每個(gè)dl中用dt包裹店鋪信息并放置一個(gè)input方便實(shí)現(xiàn)選中店鋪時(shí)勾選該店鋪內(nèi)所有商品。之后用dd包裹當(dāng)前商鋪下對(duì)應(yīng)的商品，此處頁(yè)面并不完善只是加了價(jià)格以及一個(gè)選擇框來(lái)相對(duì)應(yīng)實(shí)現(xiàn)單選效果使用。

關(guān)于效果的順序可以隨意，可以從點(diǎn)擊全選開(kāi)始。首先使用jquery選中div.all中的input標(biāo)簽添加一個(gè)change或者click事件都可以，也可以通過(guò)時(shí)間監(jiān)聽(tīng)on來(lái)添加。監(jiān)聽(tīng)當(dāng)全選對(duì)應(yīng)的input狀態(tài)發(fā)生更改時(shí)，讓所有input的狀態(tài)跟當(dāng)前input的狀態(tài)一致。

每次更改狀態(tài)后都可以直接循環(huán)獲取所有選中dd中input所對(duì)應(yīng)的商品價(jià)格相加。若是設(shè)置有商品個(gè)數(shù)需要用個(gè)數(shù)乘上相對(duì)應(yīng)的商品價(jià)格再相加，設(shè)置給dt后對(duì)應(yīng)的價(jià)格。在循環(huán)得到所有dt的價(jià)格相加設(shè)置給總價(jià)。

如果點(diǎn)擊是取消全選，也會(huì)同時(shí)計(jì)算店鋪后總價(jià)為0，從而計(jì)算商品總價(jià)為0。當(dāng)點(diǎn)擊店鋪中對(duì)應(yīng)的input時(shí)，需要設(shè)置當(dāng)前店鋪下對(duì)應(yīng)的所有商品狀態(tài)跟當(dāng)前input狀態(tài)一致。想要獲取當(dāng)前店鋪對(duì)應(yīng)的商品可以根據(jù)this當(dāng)前標(biāo)簽選擇使用jquery篩選中對(duì)應(yīng)的查找api來(lái)找到并設(shè)置。

設(shè)置狀態(tài)后需要根據(jù)當(dāng)前店鋪下所有選擇商品的價(jià)格和來(lái)設(shè)置店鋪后對(duì)應(yīng)的價(jià)格。再?gòu)男芦@取所有店鋪后邊的價(jià)格計(jì)算和設(shè)置給總價(jià)格。此處計(jì)算所有店鋪對(duì)應(yīng)的價(jià)格和這個(gè)效果在全選中也有使用可以選擇封裝調(diào)用。

同時(shí)會(huì)出現(xiàn)一個(gè)問(wèn)題，若是選中所有店鋪后，全選的狀態(tài)并沒(méi)有改變。所有需要在點(diǎn)擊商鋪時(shí)同時(shí)判斷一下是否是素有店鋪都是選中狀態(tài)，如果是則需要設(shè)置全選input的狀態(tài)跟隨店鋪更改。

最后當(dāng)單點(diǎn)需要設(shè)置給每一個(gè)商品所對(duì)應(yīng)的input按鈕。當(dāng)點(diǎn)擊單選按鈕時(shí)，需要獲取當(dāng)前商品所對(duì)應(yīng)的價(jià)格設(shè)置給店鋪后對(duì)應(yīng)的那個(gè)價(jià)格。之前編寫(xiě)的效果中有獲取每個(gè)店鋪下對(duì)應(yīng)所有選中商品價(jià)格的和，可以選擇封裝多次調(diào)用。在設(shè)置店鋪價(jià)格更改時(shí)需要同時(shí)更改總價(jià)的值。上方代碼也有重復(fù)，可以封裝成函數(shù)多次分別調(diào)用。

點(diǎn)擊商品后若是使當(dāng)前店鋪下所有商品選中，同時(shí)也需要操作店鋪后對(duì)應(yīng)的input選中，如果不是所有都選中的話需要設(shè)置店鋪對(duì)應(yīng)的不選中。

當(dāng)然在更改了店鋪的狀態(tài)時(shí)就需要再此更改一下全選的選中狀態(tài)，調(diào)用一下已經(jīng)封裝好的函數(shù)。至此購(gòu)物車(chē)的基本效果已經(jīng)成型。