Web全栈~17.购物车案例(JavaScript动态效果)

上一期

前言

前三期已经对购物车的样式绘制完毕,那么这一期就用JavaScript来实现动态效果。

全选

思路

可以在input标签里,添加单击事件,并且传递一个this。这个this就会把input本身传递过去。

<li><input type="checkbox"  id="all" onclick="cheAllFlag(this)"/>全选
</li>

function cheAllFlag(th){//判断本身是否被点击var flag = th.checked;alert(flag);
}

确认用户点击之后,就在下面每个框都加一个name。注意这个name必须都叫一样的名字才好判断。接着使用for循环遍历就行了~

function cheAllFlag(th){//判断全选框是否被勾选var flag = th.checked;//获得所有的多选框叫fav的对象var fav = document.getElementsByName("fav");//for循环遍历,如果用户点击了全选那么flag就是true,用户没点击那么flag就是falsefor(var i in fav){fav[i].checked = flag;}
}

这个时候全选看似是做成功了,但是又有了一个BUG。那就是，假如用户没点全选,而是把商品的勾挨个选,这个时候全选按钮并不会自动勾上。所以这个时候就需要再写一个单击事件分别放在那些商品详情的标签里判断才行~

function checkFlag(){//默认全选var flag = true;//获得所有的多选框叫fav的对象var fav = document.getElementsByName("fav");//由于第一个和最后一个框都是全选框,所以遍历的时候就避免它们for(var i = 1; i < fav.length - 1; i++){//判断是否真的全部被勾选,如果有一个没勾选则都不需要自动勾上全选if(!fav[i].checked){//有一个没选就说明不是全选flag = false;break;}}//将第一个和最后一个框赋值fav[0].checked = flag;fav[fav.length - 1].checked = flag;
}

数量增加效果

上一期绘图的时候,忘记考虑到这点。。。所以这里进行改进。数字放在input里面,或许会更容易修改。

<li><button onclick="add(this)">+</button><input type="text" style="width: 10px;" name="data" id="data" value="1"/><button>-</button>
</li>

其实也很简单,直接拿到它,然后给加和减都各自添加一个单击事件修改就行了~

<li><button onclick="add(this)">+</button><input style="width: 10px;" value="1"/><button>-</button>
</li>

/*增加
*/
function add(th){//获得下一个节点对象(因为Input在add的下面)var nex = th.nextElementSibling;//改变节点的value值nex.value = Number (nex.value) + 1;
}
/*减少
*/
function reduce(th){//获得上一个节点对象(因为input在reduce的上面)var pre = th.previousElementSibling;//改变节点的值pre.value = Number(pre.value) - 1;
}

结算数量

原理还是和刚刚加减一样。只是选择的标签对象变了而已~

//获得每一个商品的单价
var val = nex.parentNode.nextElementSibling.innerHTML;
//计算总价格
var num = Number(val)*Number(nex.value);
//把总的价格赋值给指定的对象
nex.parentNode.nextElementSibling.innerHTML ="￥" + num;

删除结点

这个最简单,还是直接传this过来然后remove即可~

//删除指定的节点
function  checkTest4(th){//获得父节点divvar div=th.parentNode.parentNode.parentNode;div.remove();
}

Web全栈~17.购物车案例(JavaScript动态效果)相关推荐

Web全栈~18.jQuery
Web全栈~18.jQuery 上一期 jQuery是JavaScript的一个函数库,对JavaScript进行了一个封装.jQuery将常用的.复杂的操作进行函数化封装,直接调用,大大降低了使用J ...
php web教程视频教程下载,Web全栈 PHP+React系列视频教程下载
Web全栈 PHP+React系列视频教程下载课程介绍: 此套Web全栈 PHP+React系列视频教程覆盖PHP.前端和区块链应用开发三大热门职位,教程对网络基础.前端基础(HTML CSSJav ...
开课吧python全栈靠谱么-杭州Web全栈
Web全栈招生简章开课吧简介开课吧,中国有口皆碑的互联网人学习平台,为互联网从业者及潜在从业者提供O2O职业学习.就业.职业成长服务,让学习者收获互联网从业技能和能力,从而实现从"校园& ...
《web全栈工程师》：中总结的20条军规和必读书单
作为一个前端新人,应该不断学习加强各种基础技术,而且也要多看别人的建议,别人成功的经历或许不能让你复制,但是你总能从中有所收获,身体和灵魂总要有一个在路上. 今天抱起了实习时候充充翻过的一本书< ...
【融职教育】Web全栈开发就业班核心优势
IT技能培训行业现在是一片红海,在红海中求生存和发展就要具有一定的特色和竞争优势.本质上都是为学员提供更好的服务,提高教学品质,让学员可以学会技术,掌握足够工作技能,具有向企业交付的能力,让学员不仅可 ...
Bootstrap实战练习---Web全栈课程体系(表格+巨幕)
Bootstrap实战练习-Web全栈课程体系(表格+巨幕) 原网页效果图连接我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> ...
web全栈-第一讲：web开发基本知识点
移动互联网时代越来越凸显前端技术重要性! 最近在学习万门教育的WEB全栈工程师零基础特训班课程. 第一讲基本知识点以京东网站讲解网站案例. 看网站页面先看布局,了解共性.从大处着眼.小处着手. 整 ...
苏州木渎计算机课程培训,苏州木渎H5/web全栈开发培训
课程名称:H5/web全栈开发课程类型:网页设计班型:全日制/周末班/晚班适用校区:全校区课程详情: 由于网络的发展以及人们使用网络的频繁性,企业需要通过网页呈现产品.服务.理念.文化,或向大 ...
《Web全栈工程师的自我修养》浓缩笔记（下）
<Web全栈工程师的自我修养>浓缩笔记(下) 2017.03.30 17:23 7912浏览六.大前端 1. 易于上手.难于精通不同于某些"难于上手.难于精通"的职 ...

Web全栈~17.购物车案例(JavaScript动态效果)

Web全栈~17.购物车案例(JavaScript动态效果)

上一期

前言

全选

思路

数量增加效果

结算数量

删除结点

Web全栈~17.购物车案例(JavaScript动态效果)相关推荐

最新文章

热门文章