jquery案例13——jq简易购物车、加减计算、删除
一、案例效果演示
二、案例整体代码
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><script src="./js/jQuery.min.js">script><style>* {margin: 0;padding: 0;}table {text-align: center;}td {padding: 5px;}input {width: 40px;outline: none;margin: 0 5px;}button {width: 20px;}style>
head><body><div id="content"><table border="1" cellspacing="0"><tr><th style="width: 100px;">商品th><th style="width: 200px;">数量th><th style="width: 100px;">单价th><th style="width: 200px;">总价th><th style="width: 200px;">操作th>tr><tr><td>金桔柠檬水td><td><button class="reduce">-button><input type="text" value="1" class="inputNum" /><button class="add">+button>td><td>￥<span class="itemPrice">4span>td><td>￥<span class="itemMoney">4span> td><td><em class="del">删除em>td>tr><tr><td>营养快线td><td><button class="reduce">-button><input type="text" value="1" class="inputNum" /><button class="add">+button>td><td>￥<span class="itemPrice">5span>td><td>￥<span class="itemMoney">5span> td><td><em class="del">删除em>td>tr><tr><th>总数量：th><th><span class="allNum">0span>th><th>全部总价：th><th>￥<span class="allMoney">0span>th><th>th>tr>table>div><script>$(function() {$('.add').click(function() {// 最好是摘出来 这样看起来直观// 数量元素$input = $(this).siblings('.inputNum');// 输入框中的值$inputNum = $input.val();$inputNum++;$input.val($inputNum);// 获取单个商品价格数值$itemPrice = $(this).parent().siblings().find('.itemPrice').text();// 获取总价元素itemAllMoney = $(this).parent().siblings().find('.itemMoney')itemAllMoney.text($inputNum * $itemPrice);getSum();});$('.reduce').click(function() {// 最好是摘出来 这样看起来直观// 数量元素var $input = $(this).siblings('.inputNum');// 输入框中的值var $inputNum = $input.val();if ($inputNum > 1) {$inputNum--;$input.val($inputNum);// 获取单个商品价格数值var $itemPrice = $(this).parent().siblings().find('.itemPrice').text();// 获取总价元素var itemAllMoney = $(this).parent().siblings().find('.itemMoney')itemAllMoney.text($inputNum * $itemPrice);}getSum();});$('.inputNum').change(function() {console.log($(this).val());var $inputNum = $(this).val()if ($inputNum <= 1) {$(this).val(1);} else {// 获取单个商品价格数值var $itemPrice = $(this).parent().siblings().find('.itemPrice').text();// 获取总价元素var itemAllMoney = $(this).parent().siblings().find('.itemMoney')itemAllMoney.text($inputNum * $itemPrice);}getSum();});$('.del').click(function() {$(this).parents('tr').remove();getSum();});function getSum() {var allNum = 0;var allMoney = 0;// $('.inputNum').val();// console.log($('.inputNum'));$('.inputNum').each(function(i, ele) {// console.log($(ele).val());allNum += parseInt($(ele).val());});console.log(allNum); //打印一下总的数量$('.itemMoney').each(function(i, ele) {// console.log($(ele).val());allMoney += parseFloat($(ele).text());});console.log(allMoney); //打印一下总的金额$('.allNum').text(allNum);$('.allMoney').text(allMoney);}getSum();});script>
body>html>
五、总结
总金额和总数量需要进行封装，谁用谁调用函数。
当我加的时候需要调用、减的时候需要调用、输入框值改变的时候也需要调用、页面加载完毕之后，刚上来也需要调用一下。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！