jQuery-案例-购物车

一.分析需求

准备：动态生成表格

功能1：点击thead中的复选框，实现全选（控制tbody中的所有复选框）

功能2：点击tbody中复选框，控制thead中全选是否选中

功能3：封装实现计算总数量和总价格

功能4：点击加按钮实现商品数量增加

功能5：点击减按钮实现商品数量递减

功能6：点击删除按钮删除单种商品

功能7：删除所选商品功能8：清理购物车

二.根据功能写代码

1.准备：动态生成表格

for (var i = 0; i < datas.length; i++) {

var obj = datas[i];

var $tr = $('<tr></tr></tr>').appendTo('tbody');

var htmlStr = `

<td>

</td>

<td>

<p>${obj.pName}</p>

</td>

<td>

${obj.price}￥

</td>

<td>

</div>

</td>

<td>

${obj.price * obj.count}￥

</td>

<td>

</td>

$tr.html(htmlStr);

}

图片详解1：准备：动态生成表格

准备

2. 功能1：点击thead中的复选框，实现全选（控制tbody中的所有复选框）

$('thead input').click(function ()

$('tbody input[type=checkbox]').prop('checked', this.checked)

getTotalCountAndTotalPrice();

})

图片详解2：功能1

功能1

3.功能2：点击tbody中的复选框，控制thead表格是否全选

$('tbody input').click(function () {

var len1 = $('tbody input[type=checkbox]').length

var len2 = $('tbody input[type=checkbox]:checked').length

$('thead input').prop('checked', len1 == len2);

getTotalCountAndTotalPrice();

})

图片详解3：功能2：点击tbody中的复选框，控制thead表格是否全选

功能2

4.功能3：封装实现计算总数量总价格

function getTotalCountAndTotalPrice() {

var trs = $('tbody input[type=checkbox]:checked').parent().parent();

var totalCount = 0;

var totalPrice = 0

for (var i = 0; i < trs.length; i++) {

var count = trs

.eq(i)

.find('input[type=text]')

.val();

totalCount += parseInt(count);

var xiaoji = trs

.eq(i)

.find('td')

.eq(4)

.text();

totalPrice += parseFloat(xiaoji);

}

$('#totalCount').text(totalCount);

$('#totalPrice').text(totalPrice);

}

图片详解4：功能3：封装实现计算总数量总价格

功能3

5.功能4：点击加按钮实现商品数量增加

$('.add').click(function () {

var $txt = $(this).prev();

var count = $txt.val(

count++

$txt.val(count);

var $tr = $(this).parent().parent().parent()

var price = $tr.find('td:eq(2)').text();

var xiaoji = count * parseFloat(price);

$tr.find('td:eq(4)').text(xiaoji + '￥');

$tr.find('input[type=checkbox]').prop('checked', true)

getTotalCountAndTotalPrice();

})

图片详解5：功能4：点击加按钮实现商品数量增加

功能4

6.功能5：点击减按钮实现商品数量递减

$('.reduce').click(function () {

var $txt = $(this).next();

var count = $txt.val()

count--

if (count <= 1) {

$(this).addClass('disabled');

count = 1;

}

$txt.val(count);

var $tr = $(this).parent().parent().parent()

var price = $tr.find('td:eq(2)').text();

var xiaoji = count * parseFloat(price);

$tr.find('td:eq(4)').text(xiaoji + '￥');

$tr.find('input[type=checkbox]').prop('checked', true)

getTotalCountAndTotalPrice();

})

图片详解6：功能5：点击减按钮实现商品数量递减

功能5

7.功能6：点击删除按钮删除单种商品

$('.del').click(function () {

var isOk = confirm('确定删除？');

if (isOk) {

$(this).parent().parent().remove();

getTotalCountAndTotalPrice();

showOrHideInfo()

}

})

图片详解7：功能6：点击删除按钮删除单种商品

功能6

8.功能7：删除所选商品

$('.del-all').click(function () {

var $trs = $('tbody input[type=checkbox]:checked').parent().parent();

if ($trs.length == 0) {

alert('请选中要删除的商品');

} else {

var isOk = confirm('确定删除？');

if (isOk) {

$trs.remove()

getTotalCountAndTotalPrice();

showOrHideInfo()

}

})

图片详解8：功能7：删除所选商品

功能7

9.功能8：清理购物车

$('.clear').click(function(){

$('.car').hide();

$('.info').show(500);

})

图片详解 9：功能8：清理购物车

功能8

封装检测是否要显示购物车为空（调用到功能6，7，8）

function showOrHideInfo() {

var len = $('tbody tr').length

if (len == 0) {

$('.info').show(500);

$('.car').hide();

}

图片详解10：封装检测是否要显示购物车为空（调用到功能6，7，8）

购物车是否为空

10.点击所有加按钮全选选中

封装函数（调用到功能4中）

function xuanZhong()

var len1 = $('tbody input[type=checkbox]').length

var len2 = $('tbody input[type=checkbox]:checked').length

$('thead input').prop('checked', len1 == len2);

}

图片详解11：点击所有加按钮全选选中

点击所有加按钮全选选中