JQuery fake shopping cart for beginners ------- has nothing to do with real data, jQuery -------

JQuery fake shopping cart for beginners ------- has nothing to do with real data, jQuery -------

It is really disgusting for beginners to use jquery to write a simulated Shopping Cart. Today we will analyze the shopping cart to see what is difficult.

 

Shopping Cart

Let's start with the check box. Let's talk about the code !!

All with serial numbers are analyzed!

 

1. Select all or not select all results

// Click the check box to select all or not select all effects $ ("# allCheckBox "). click (function () {var checked = $ (this ). is (": checked"); // check whether any Matching Element in the Set returns true, false $ (". cart_td_1 "). children (). attr ("checked", checked); // put the above variables here for use}); // determine whether all function ifAllChecked () {var checkedBoxs = $ (". cart_td_1 "). children (); // obtain the set var sum = checkedBoxs. size (); // The value returned by size () and length () is the same var k = 0; // The iteration variable // each is a cyclic checkedBoxs. each (function (index, dom) {// index the index of the current object, or the index of all objects. The index of the current dom object, or the object if ($ (dom ). is (": checked") k ++; // match the selected element on the page}); if (k = sum) {// The number of input check boxes $ ("# allCheckBox "). attr ("checked", true); // if it is true, change the value} else {$ ("# allCheckBox "). attr ("checked", false); // otherwise, we will change the value} ifAllChecked (); // run the command after the page is loaded // select a single choice to judge $ (". cart_td_1 "). children (). click (function () {ifAllChecked ();});

After we solve the check box problem, the rest is the problem of calculating the total price and subtotal. In fact, it is not difficult to think about it carefully, the difficulty is that these values are all on the html page. How can we take them down and use them ?!!!!

 

2. compute Functions

// Calculate the total price and subtotal function productCount () {var $ tr = $ ("# shopping "). find ("tr [id]"); // the initial value of the total price and credits var summer = 0; var integral = 0; $ tr. each (function (I, dom) {// we start to take all the values on the page down var num =$ (dom ). children (". cart_td_6 "). find ("input "). val (); // number of items var price = num * $ (dom ). children (". cart_td_5 "). text (); // item Subtotal $ (dom ). children (". cart_td_7 "pai.html (price); // display the commodity subtotal summer + = price; // The total price has started to accumulate integral + = $ (dom ). children (". cart_td_4 "). text () * num; // points}); $ ("# total "). text (summer); // total price $ ("# integral "). text (integral); // points} productCount (); // run after the page is loaded

 

3. Click the minus sign or the plus sign.

// Increase or decrease the number of items, increase when the flag is true, and decrease function changeNumber (dom, flag) {var $ input =$ (dom) when the flag is false ). parent (). find ("input"); var value = $ input. val (); if (flag) {value ++;} else {value --; if (value <= 0) {// the minimum number of parts cannot be less than 0, value = 1; // when we have specified that the number of parts cannot be less than 0, we have reduced the number of parts, so we can adjust the number of items back to alert ("the number of babies must be greater than 0") ;}}$ input. val (value); productCount ();};

 

Because the plus sign and minus sign are images, we need to bind the function to the image.

4. Bind The Add/subtract function to the image.

// Click reduce. When we click an image, call the method $ (". cart_td_6 "). find ("img [alt = 'minus']"). click (function () {changeNumber (this, false) ;}); // click to add $ (". cart_td_6 "). find ("img [alt = 'add']"). click (function () {changeNumber (this, true );});

 

Of course, we also delete a column of items, so I used the node operation.

5. node operations

// Click Delete node operation $ (". cart_td_8 "). find (""). click (function () {$ (this ). parent (). parent (). prev (). remove (); // Delete the previous tr $ (this ). parent (). parent (). remove (); // Delete the current tr productCount ();});

 

We also need to customize a function to delete the selected function.

6. Delete the selected

// Click Delete selected $ ("# deleteAll "). click (function () {$ ("# shopping "). find ("tr [id]"). each (function (I, e) {var $ tr = $ (e); // The returned value is true or false var checked = $ tr. children (". cart_td_1 "). children (). is (": checked"); if (checked) {// The prev Traversal method is used to search for the previous $ tr of its own peer element. prev (). remove (); $ tr. remove () ;}}); // click to delete the selected product. The total price calculation function productCount () ;}) is still called ();});

So after our analysis, it is not difficult at all, right !!!

Our fake shopping cart is complete !!!

Next time, we will see you again!