Home > Developer > Web Develop
in this paper, we describe the simple method of realizing the price function of the shopping cart by jquery, which is easy to do and share for everyone's reference. Specific as follows:
Purpose:1<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "2pageencoding= "Utf-8"%>3<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >456<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">7<title>jquery Realization of Shopping cart function </title>8<!--introducing jquery library files with absolute paths--9<script type= "Text/javascript"Tensrc= "${pagecontext.request.contextpath}/js/jquery-1.11.2.js" ></script> One<script type= "Text/javascript" > A $ (function () { - //according to the class selector, when clicking the Add Item button, register the click event handler for the plus button -$ (". Add"). Click (function () { thevar t = $ ( This). Parent (). Find (' input[class*=text_box] '); - //Add button 1 times per click, number of items plus 1 -T.val (parseint (T.val ()) + 1); - //then call the Calculate commodity price method + settotal (); - }); + A //based on the class selector, triggers when the minus button is clicked at$ (". Min"). Click (function () { -var t = $ ( This). Parent (). Find (' input[class*=text_box] '); - //reduce the number of items by 1 by 1 times per click -T.val (parseint (T.val ())-1); - //when the value of the text box is reduced to less than or equal to 1, the value is 1 - if(parseint (T.val ()) < 0) { inT.val (0); - } to //then call the Calculate commodity price method + settotal (); - }); the * //function to calculate the total price $ function Settotal () {Panax Notoginsengvar s = 0; - //Each traversal the$ ("#tab TD"). each ( + function () { A //The find () method iterates through the descendants of the input tag, which is named the value in the Text_box text box, i.e. the quantity of the product multiplied by the price of the commodity. thes + = parseint ($ ( This). Find (' input[class*=text_box] '). Val ()) * +Parsefloat ($ ( This). Find (' span[class*=price] '). text ()); - }); $ //Assign the result of the calculation to the total price through the jquery HTML () method and trade-offs by ToFixed () $$ ("#total"). HTML (s.tofixed (2)); - } - //then call the Calculate commodity price method the settotal (); - });Wuyi</script> the -<body> Wu<table id= "tab" > -<tr> About<td><span> Product Price: </span><spanclass= "Price" >2.50 (yuan) </span> <input $ class= "min" name= "type=" button "value="-"/> <input - class= "Text_box" name= "" type= "Text" value= "1"/> <input - class= "Add" name= "" type= "button" value= "+"/></td> -</tr> A<tr> +<td><span> Product Price: </span><spanclass= "Price" >7.50 (yuan) </span> <input the class= "min" name= "type=" button "value="-"/> <input - class= "Text_box" name= "" type= "Text" value= "1"/> <input $ class= "Add" name= "" type= "button" value= "+"/></td> the</tr> the</table> the<p> theTotal Price: <label id= ></label>(Yuan) -</p> in</body> theProject SourceImplementation of the JSP interface to modify the number of items in the shopping cart , Click the button can achieve the reduction or increase in the number of goods, and can be real-time calculation of the total price of goods . Implementation Ideas:the code in the file implements a simple shopping cart calculate the total price according to the quantity function, source code can be directly imported to run, here is a detailed description of its implementation process.
1. Introduction of jquery library files
<!--introducing jquery library files with absolute paths--
<script type="Text/javascript" src="${pagecontext.request.contextpath}/js/ Jquery-1.11.2.js "></script>
2, write a table, build the main content
3. Writing jquery code
①, $ (function () {}), when the document structure is fully loaded and then executes the code in the function ;
②,$ (". Add"). Click (function () {}), register the click event handler for the plus button ;
③, click the Plus button to execute the code
④,var t=$ (this). Parent (). Find (' input[class*=text_box] '), gets the text box, which shows the number of items to be purchased ;
⑤,t.val (parseint (T.val ()) +1), click on the number of items plus 1;
⑥,settotal (), perform this function to calculate the total price and display ;
⑦,$ (". Min"). Click (function () {}), register the click event handler for the minus button ;
⑧, Calculating the total price of the function
⑨,var, s=0, declares a variable that is used to store the total price.
⑩,$ ("#tab TD"). each (function () {
S+=parseint ("This"). Find (' input[class*=text_box] '). Val ()) *parsefloat ($ (this). Find (' span[class*=price] '). Text () );
});
You can traverse the text box and multiply the unit price, then accumulate it and calculate the total value.
4, the operation effect shows :
The above is a jquery implementation of the shopping cart calculation of the price function of the method , writing is relatively simple, can be used as a beginner of jquery learning materials to strengthen The learning of jquery basic grammar.
The method of realizing the price function of the shopping cart by jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
