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

This article mainly explains "jQuery how to simulate the Taobao shopping cart function", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's train of thought slowly in depth, together to study and learn "jQuery how to simulate Taobao shopping cart function" bar!

First of all, the requirements of the content we want to achieve are as follows:

1. On the shopping cart page, when the Select all check box is selected, the check boxes in front of all items are selected, otherwise the check boxes for all items are unchecked.

two。 When the check box in front of all items is selected, the Select all check box is selected, otherwise the Select all check box is deselected.

3. When you click the icon-the quantity is reduced by one and the item cannot be less than 0 and the total price and points of the item change accordingly.

4. When you click the icon +, the quantity increases and the total price and points of the goods change.

5. Click Delete selected will delete the user selected item, click Delete to delete the item and reach the total price and points of the product will be changed.

Let's start with the code:

$(function () {subtotal (); addorminus (); allcheckbox (); delet (); deleselect ();}); / / set function countmoney () {var money = 0; / / Total var jifen = 0; / / Total td_7 $(".cart _ td_7") .each (function () {var m = $(this). Text (); money + = Number (m) Var j = $(this) .siblings (".cart _ td_4"). Text (); var number = $(this) .siblings (".cart _ td_6"). Children ("input"). Val (); jifen + = Number (j * number);}); $("# total") .html (money); $("# integral") .html (jifen);} / / subtotal function subtotal () {var obj = $(".cart _ td_7") Obj.each (function () {/ / each traverses each element whose clss is .card _ td_7 var num = $(this) .siblings (".cart _ td_6"). Children ("input"). Val (); / / the current quantity selected by the shopping cart var price = $(this) .siblings (".cart _ td_5"). Html (); / / price var money = num * price of the currently selected item / / subtotal $(this) .html (money); countmoney ();} / add or decrease the quantity function addorminus () {$(".hand") .on ("click", function () {var num; if ($(this) .attr ("alt") = "minus") {num = $(this). Next (). Val () If (num = = 1) {$(this) .css ("display", "none");} else {$(this). Next (). Val (--num);}} else {num = $(this). Prev (). Val (); $(this). Prev (). Val (+ + num); if (num = 1) {$(this) .siblings ("[alt==minus]"). Css ("display", "visible") } else {}} subtotal ();} / Select all or none function allcheckbox () {$("# allCheckBox") .live ("change", function () {if ($(this) .attr ("checked") = "checked") {$("[name=cartCheckBox]"). Attr ("checked", "checked");} else {$("[name=cartCheckBox]"). Attr ("checked", false);}) Live ("change", function () {var bool = true; $("[name=cartCheckBox]") .each (function () {if ($(this) .attr ("cheked")! = "checked") {bool = false;}}); if (bool) {$("# allCheckBox"). Attr ("checked", "checked");} else {$("# allCheckBox"). Attr ("checked", false) }});} / delete function delet () {$(".cart _ td_8 > a") .live ("click", function () {$(this). Parent (). Parent (). Prev (). Remove (); $(this). Parent (). Parent (). Remove (); subtotal ();}) Delete the selected function deleselect () {$("# deleteAll > img") .live ("click", function () {$("[name=cartCheckBox]") .each (function () {if ($(this) .attr ("checked") = "checked") {$(this). Parent (). Parent (). Prev (). Remove (); $(this). Parent (). Parent (). Remove ()); subtotal ();}) } Thank you for your reading, the above is the content of "how jQuery simulates Taobao Shopping cart function". After the study of this article, I believe you have a deeper understanding of how jQuery simulates Taobao Shopping cart function, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.