Shulou(Shulou.com)06/01 Report--

Editor to share with you how to simulate the implementation of Taobao shopping cart module based on jQuery. I hope you will get something after reading this article. Let's discuss it together.

This is the page of shopping cart in the web version of Taobao

Note that adding events to checkbox is done with change ()

To add an event to button is to use click ()

1. Each click on the + sign, multiplying the value of the text box by the price of the current commodity is the subtotal of the commodity.

2. Only the subtotal of this commodity can be added, that is, the subtotal module of the current commodity.

3. Text method is used to modify the content of ordinary elements.

4. The current price of the commodity needs to remove the symbol of "substr" and then multiply it to intercept the string "

5. Parents ('selector') can return the specified ancestor element 4

6. The result of the final calculation if you want to retain two decimal places through toFixed (2) method

7. Users can also directly modify the values in the form, and also calculate the subtotal, using the form change event

8. Multiply the value of the latest form content by the unit price, but it is still a subtotal of the current item

Calculate totals and totals:

Idea: add the values in all the text boxes to the total quantity, the total amount is the same.

The values in the text box are different. If you want to add them, you need to use the traversal of each. Declare a variable and add it.

Clicking the + sign or the-sign will change the total and the total amount. If the user modifies the value in the text box, it will also change the total amount, so it will be added to these three events respectively, so encapsulate a function to calculate the total amount and the total amount. The above operations can be called.

Note: the total is the value in the text box plus val (). The total is the content of the ordinary element text ()

Note that the contents of ordinary elements should be removed and converted to numbers before they can be added.

Document img {width: 80px; height: 80px} a {color: black; text-decoration: none;} .mony {width: 20px; text-align: center } subtotal operation of unit price quantity of all selected commodities

[new Power week] YUKI Little Tree lovely printed short white T-shirt + snap high waist loose retro wide leg denim trousers ¥37.00 ¥37.00 deleted

Japanese short-sleeved t-shirt women's summer thin style design sense a minority of Japanese sweet and cool students' small loose tops ¥49.90 ¥49.90 deleted

Spring and autumn plaid shirt jacket women 2022 new small design sense niche loose lazy style Japanese jacket ¥69.90 ¥69.90 deleted

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.