2022年的前端之路(1)——購(gòu)物車的js實(shí)現(xiàn)

car.js
car.js
car.js
car.js
car.js

今天,終于把購(gòu)物車的js寫(xiě)完了,雖然不是我自己寫(xiě)出來(lái)的,但是也是在跟著老師寫(xiě)的基礎(chǔ)上,然后再自己去寫(xiě)一遍,通過(guò)自己寫(xiě)的這一遍,發(fā)現(xiàn)了很多的問(wèn)題,之前我只會(huì)一味的跟著老師去敲敲代碼,然后課后也不會(huì)去再敲一遍,這樣就很容易導(dǎo)致一個(gè)錯(cuò)誤:我以為我學(xué)會(huì)了。因?yàn)楦蠋煹乃悸穼?xiě),我們肯定不會(huì)出錯(cuò),然而當(dāng)你按照自己的想法寫(xiě)的,你就不會(huì)有那么多的思路了,就像很簡(jiǎn)單的一個(gè)問(wèn)題:”代碼寫(xiě)錯(cuò),或者漏寫(xiě) '' ."號(hào),導(dǎo)致代碼運(yùn)行不出,這的小問(wèn)題,也許你想破腦袋都有很可能想不出,因?yàn)槟銜?huì)覺(jué)得,這么簡(jiǎn)單的問(wèn)題,怎么可能會(huì)出錯(cuò)呢,可就是這么一些小小的問(wèn)題,導(dǎo)致你的失敗。今天就寫(xiě)這些代碼,我花了一個(gè)上午的時(shí)間,在寫(xiě)之前,我總在想:有這個(gè)必要么?多去看幾遍不就好了。經(jīng)過(guò)了這一個(gè)上午的實(shí)驗(yàn),我現(xiàn)在可以肯定的回答:“非常的有必要?!币虼酥挥袆?dòng)手,你才會(huì)發(fā)現(xiàn)自己的錯(cuò)誤,不然你看著這些完美的代碼,只會(huì)洋洋得意的認(rèn)為,我沒(méi)錯(cuò)。

代碼思路分析:

1.全選全不選功能 :就是把全選按鈕(checkall)的狀態(tài)賦值給 三個(gè)小的按鈕(j-checkbox)就可以了

在這里面要明確checkall(全選)和j-checkbox(小按鈕),然后分別給他們附上加載事件,

2.如果小復(fù)選框被選中的個(gè)數(shù)等于3 就應(yīng)該把全選按鈕選上,否則全選按鈕不選。

3.增減商品數(shù)量模塊 首先聲明一個(gè)變量,當(dāng)我們點(diǎn)擊+號(hào)(increment),就讓這個(gè)值++,然后賦值給文本框。

4.用戶修改文本框的值 計(jì)算 小計(jì)模塊

5.計(jì)算總計(jì)和總額模塊

6.刪除商品模塊

7.更換選中的背景顏色

我在里面犯的最主要的錯(cuò)誤就是:粗心。要么是忘了寫(xiě)加載函數(shù),要么是忽略類名前面的".",這些因素,也是一直伴隨著我十幾年的 錯(cuò)誤,如今,在新的學(xué)習(xí)上,又開(kāi)始重蹈覆轍了,我也希望,通過(guò)今天的這番檢測(cè),我能夠在今后的學(xué)習(xí)中,改正這些小毛病。

知識(shí)總結(jié):

1.prop() 方法設(shè)置或返回被選元素的屬性和值。

element.prop("屬性名") 獲取元素固有的屬性值,

prop("? ", " ") 添加屬性

console.log($(this).prop("checked")); ? //用來(lái)判斷是否選中復(fù)選框

2.toFixed(2) 保留兩位小數(shù)

3.parents()? 表示父級(jí)的父級(jí)==parent().parent()

4.substr() 截取字符串

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容