悦轩饼家购物车动态效果

（1）主题（目标）：

完成悦轩饼家购物车动态效果

（2）完成页面所需要的知识点（重难点）

遍历：each()

正在执行当前事件的元素：$(this)

父级元素：parent()

上一个标签：prev()

下一个标签：next()

把当前数据变成int类型parseInt()

标签中的内容：text()

用来检查指定元素是否被包含：hasClass()

元素背景图片只显示一次，不重复：background-repeat: no-repeat;

（3）完成页面的步骤

首先将静态页面中数量的数值改为一个减法按钮一个文本框和一个加法按钮，分别给三个标签用三个名字命名class，总金额也起一个不同的class名字，在引入jQuery插件，用js编写代码就能完成。如下：

<script type="text/javascript">
		$(function(){
			//计算总金额
			function getsum(){
				var sum=0;
				//遍历获取到的每一个对象
				$(".num").each(function(){
					//获取标签
					var prices=$(this).parent().prev().text();
					//计算总价
					sum+=$(this).val()*prices;
				})
				//把总价放入指定位置
				$(".sum").text(sum);
			}
			//单击减法按钮，让文本框内的数字-1
			$(".jian").click(function(){
				//获取标签,next()下一个标签
				var num=$(this).next().val();
				//判断，当num大于0时-1
				if(num>0){
					$(this).next().val(num-1);
				}
				getsum();
			})
			//单击加法按钮，让文本框内的数字+1
			$(".add").click(function(){
				//获取上一个标签的内容
				var num=$(this).prev().val();
				//把num变成int类型
				var n=parseInt(num);
				//把文本框内的数字+1
				$(this).prev().val(n+1);
				getsum();
			})
		})
	</script>

商品选中状态样式切换：

$(".bgimg").addClass("active-add")
			$(".bgimg").click(function(){
				if($(this).hasClass("active-add")){
					$(this).removeClass("active-add").addClass("active-remove");
				}else{
					$(this).removeClass("active-remove").addClass("active-add");
				}
			})

删除商品效果：

$(".delete").click(function(){
				if(confirm("确定要删除吗？")){
					$(this).parent().remove();
				}
			})

（4）写页面的过程中碰到的问题，怎么解决的？

问题:点击加减按钮操作，总价格就变成NaN了

解决：遍历中的text内容代码因相似错写成next()下一个

问题：选中状态背景图片不居中

解决：给a标签设置的背景图片，给a标签设置和背景图片相同的宽高，再用margin：auto居中