HTML code:
<! Doctype html>
JS Code:
/**** Click Add button ****/$ ('. Add '). Click (function () { //Modify quantity var n=$ ( This). Next (). HTML (), var num=parseint (n) +1; $ (this). Next (). HTML (num); //calculates the price var c= $ (this). Parent (). siblings (). Children ('. Price '). html (); parseint (c); var subprice = num * c; var sub_price = subprice.tofixed (2); // Keep two decimal $ (this) after the decimal point. Parent (). siblings (). Children ('. Sub_total '). HTML (sub_price); //calculates the total price var total=0; $ ('. Sub_total '). each ( function () { var price=parseint ($ (this). html ()); total+=price; var total_price =&Nbsp;total.tofixed (2); $ ('. Total b '). HTML (Total_price); }); Click the Decrease button ****/$ ('. reduce '). Click (function () { //Modified quantity var n= $ (this). Prev (). html (); var num=parseint (n) -1; if (num==0) { return;} The number is reduced to 0 and can be reduced by $ (this). Prev (). html (num); //Calculate price var c= $ (This). Parent (). siblings (). Children (". Price"). html (); parseint ( c); var subprice = num * c; Subprice.tofixed (2); var sub_price = subprice.tofixed (2); $ (This). Parent (). siblings (). Children ('. Sub_total '). HTML (sub_price); //Calculate Total Price var total=0; $ ('. Sub_total '). each (function () { var price=parseint ($ (this). html ()); total+=price; var total_price = total.tofixed (2); $ ('. Total b '). HTML (Total_ Price); });
Given the space issue, no CSS code is posted, and the final page is as follows:
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/89/1C/wKioL1gIYA6g7MTbAAEULD6Wu_A791.png "title=" Qq20161020141040.png "alt=" Wkiol1giya6g7mtbaaeuld6wu_a791.png "/>
This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1863852
jquery enables the number of shopping carts to be added and reduced, the price calculation function