CH11 jQuery遍历教学课件.ppt

11.5.3逻辑实现3.商品列表逻辑3)数量文本框输入事件运行效果如图所示。11.5.3逻辑实现3.商品列表逻辑4)“删除”按钮点击事件“删除”按钮被点击时弹窗提醒用户做二次确认，当用户再次确认删除时去掉对应的商品列表行并更新底部结算工具栏中的总金额。在cart.js中使用$(.delBtn)来监听“删除”按钮的点击事件，相关代码如下：1.//1-5删除按钮点击事件2.$(.delBtn).click(function(){3.//弹出确认框提醒用户（返回值true表示确认）4.varresult=confirm(您确认删除当前商品吗？);5.//用户确认6.if(result){7.//找到按钮对应的单元行tr并删除8.$(this).parents(.goodsBox).remove();9.//更新结算总价10.updateTotalPrice();11.}12.});上述代码使用了jQuery祖先遍历parents(.goodsBox)查找当前按钮的祖先元素tr单元行，并使用remove()全部删除，最后更新结算总价11.5.3逻辑实现3.商品列表逻辑4)“删除”按钮点击事件效果如图所示。11.5.3逻辑实现4.结算工具栏逻辑1)全选框勾选/取消当结算工具栏的全选框被勾选/取消时让商品列表中所有商品的勾选按钮也都处于被勾选/取消状态，且更新底部结算工具栏中的总金额；在cart.js中使用$(.selectAll)来监听全选框的点击事件，相关代码如下：1.//2-1全选勾选框点击事件2.$(.selectAll).click(function(){3.//被勾选4.if($(this).is(:checked)){5.//让所有商品都被勾选6.$(.goodsBoxinput:checkbox).prop(checked,true);7.}8.//取消勾选9.else{10.//让所有商品都取消勾选11.$(.goodsBoxinput:checkbox).prop(checked,false);12.}13.//更新购物车总价14.updateTotalPrice();15.});上述代码使用is(:checked)判断全选框是否被勾选，再使用prop(checked,true)和prop(checked,false)更新勾选框状态为勾选或非勾选。11.5.3逻辑实现4.结算工具栏逻辑1)全选框勾选/取消效果如图所示。11.5.3逻辑实现4.结算工具栏逻辑2)“清空购物车”按钮点击事件当“清空购物车”按钮被点击时弹窗提醒用户做二次确认，当用户再次确认则清除全部商品列表行并把结算总价更新为“0.00”。在cart.js中使用$(.clearBtn)来监听全选框的点击事件，相关代码如下：1.//2-2清空购物车按钮点击事件2.$(.clearBtn).click(function(){3.//弹出确认框提醒用户（返回值true表示确认）4.varresult=confirm(您确认清空购物车吗？);5.//用户确认6.if(result){7.//删除所有商品信息行8.$(tr.goodsBox).remove();9.//页面上更新总价10.$(.total_price).text(0.00);11.}12.});11.5.3逻辑实现4.结算工具栏逻辑2)“清空购物车”按钮点击事件运行效果如图所示。此时本项目就已经全部完成了。11.5.4案例思考【拓展练习】请变更商品的图片、描述和单价等信息，使其可以显示更多种类的商品。【进阶改造】在结算工具栏逻辑中新增“结算”按钮点击事件，当结算按钮被点击时弹窗提示已成功支付的总金额并移除已付款商品，然后更新底部结算工具栏中显示的结算总金额。11.5.4案例思考cart.js中部分参考代码如下：1.//2-3结算按钮点击事件2.$(.submitBtn).click(function(){3.//查找所有商品单元行中的勾选框元素4.