购物车页面布局新手级别理解和解析

在经过简单的前端学习后，迎来了本次的作业，于是打算记录一下。

1.前端视图

由于一张截图截不下，于是分成两张截

2.大致分析

首先大致分析导航栏部分内容。

可以按照排版分析它的块分布，每个人分块不同无所谓，能大致实现模仿即可。

这次作业我将导航栏分为三行，大图片分为一行，表单标题分一行，购物车列表每件一行，结算一行，如下图。

3.拆开每一级分析细节，并设置CSS样式

1>首页导航栏

分析：内部分为两块的原因是因为两块内部元素的距离相隔太远，与其慢慢控制内部样式，倒不如直接将元素分为左右两块。

左边块只有一个图标和一个超链接，只需要控制格式（居中、内外边距什么的）。

右边块里面有两个超链接元素，而且是横向排列，因此有两种选择，一种是使用一个一行两列的表格，内部放置两个超链接，第二种是使用无序列表。使用无序列表的话就需要通过弹性盒子去控制内部元素横向排列。

 

2>搜索框

分析：按照距离可知需要第二行的内部需要分为左右两块。

左边是一张图片，有两种方式，第一种是定义一个块，里面放一张图片，第二种是定义一个块，使用这张图片作为背景。

右边是一个搜索框加一个图标，且搜索框和图标为横向排列，方式有很多，这里就使用一行一列的table来实现（哈哈，感觉有点多余，暂且就这样用吧）。

因为存在相同的样式，上面注释了三遍，下面再出现相同的样式就不另外做注释了。

3>超链接跳转

分析：第三行中的结果比较简单，主要是将内容聚集在左下角，于是我使用一个无序列表的弹性盒子，设置它的宽度（不选择大div的宽度而定义小一点，够用就行）

4>大图片

分析：首先从格式可以看到，上下是有空白的，于是可以在大块中定义小块实现效果（根据需要实现的效果控制小块的宽高即可），里面的两行字是不同的效果，实现的方式很多，可以使用span各自定义，在此第一行文字使用了一个小div放置一个p元素，另外一个p元素就放在小div之外控制样式。

5>商品列表表格标题

分析：第五行实现效果的方式很多，弹性盒子也行，使用table也行，我在此使用table。

6>商品列表行

分析：商品列表信息这一栏可以使用table实现，但是内部调整需要很精确，不然会改动所有内容，会复杂一点。我使用的无序列表，因为列表中可以使用的东西比较多，配合弹性盒子就可以实现横向排列，控制li标签格式就能实现想要的效果。使用列表的话，只用对内容元素较多的li标签进行精细一点的样式配置即可。

因为第二个子标签中有图片有文字，因此最好配合一个div来使用，同理第四个子标签也是。

7>结算栏

分析：其实每种效果实现的方式很多，不同的样式配合起来就能实现效果，这里接不多解释了。

4.功能实现

除开界面，里面还有一小部分需要js实现的功能：全选、反选、件数计数、数量加减、小件计价、总价计价、删除和批量删除。

思路：

全选：先判断全选框的状态，然后将全选框(".select_all")的状态(checked)赋值给每个复选框(".goodsId")。

反选：遍历所有复选框的状态，当出现有为false状态的复选框时，就将全选框的状态改为false。

件数计数：遍历所有复选框的状态，为true的话就自增，但是需要在每次触发复选框状态时判断，因此建议定义为函数，方便调用。

数量加减：给加减号绑定单击事件。

小件计价：当触发数量加减的单击时间时，小件计价功能应该同步实现，因此需要通过单击位置找到单价和数量的值(找兄弟关系的内容)，相乘产生价格并在小计的位置显示出来。

总价计价：在触发复选框状态的时候，需要将复选框状态为true的小计价格加起来。

删除：通过给删除绑定单击事件，找到商品列表中的一整条商品的div，然后删除(remove)。

批量删除：绑定单击事件，当触发单击事件时，判断复选框状态，将复选框状态为true的元素删除(方法同删除)。

$(function() {

	//减号
	$(".line2-sub").click(function() {
		if (Number($(this).next().val()) <= 1) {
			$(this).next().val(1);
		} else {
			$(this).next().val(Number($(this).next().val()) - 1);
		}
		// alert(Number($(this).parent().children(".price").val()*Number($(this).parent().children(".line2-num").val())));
		console.info($(this).parent().parent().parent().children(".price").text());
		console.info($(this).parent().children(".line2-num").val());
		console.info(Number($(this).parent().parent().parent().children(".price").text()) * Number($(this).parent().children(
			".line2-num").val()));
		// console.info($(this).parent().parent().parent().children(".colPrice").text());/
		$(this).parent().parent().parent().children().children(".colPrice").html(Number($(this).parent().parent().parent()
			.children(".price").text()) * Number($(this).parent().children(".line2-num").val()));
		// colPrice();
		spendSum();
	});

	// 加号
	$(".line2-add").click(function() {
		$(this).prev().val(Number($(this).prev().val()) + 1);
		// colPrice();
		console.info($(this).parent().parent().parent().children(".price").text());
		console.info($(this).parent().children(".line2-num").val());
		console.info(Number($(this).parent().parent().parent().children(".price").text()) * Number($(this).parent().children(
			".line2-num").val()));
		$(this).parent().parent().parent().children().children(".colPrice").html(Number($(this).parent().parent().parent()
			.children(".price").text()) * Number($(this).parent().children(".line2-num").val()));
		spendSum();
	});

	//全选
	$("#select_all").click(function() {
		// alert("hello");
		$("input[name='goodsId']").prop("checked", $(this).prop("checked"));
		//查询到bottomCheckbox内的span，将结果填充进去
		// $(".goodsNumSum").html(toltoNum);
		toltoNum();
		var sum = 0;
		$("input[name='goodsId']:checked").each(function() {
			sum += Number($(this).val());
		});
		$(this).parent().parent().parent().parent().children(".result").children(".result-right").children().children().children(
			".colPrice").html(sum);
		spendSum();
	});


	//反选
	$("input[name='goodsId']").click(function() {
		// alert("hello");

		//标记输入框状态,一旦为false则表示有复选框未被选中
		var state = true;
		//获取列表信息
		var goodsList = $("input[name]");
		//遍历输入框状态
		for (var i = 0; i < goodsList.length; i++) {
			if (!goodsList[i].checked) {
				//如果存在有输入框的状态为false，则改变全选框的状态
				state = false;
				break;
			}
		}
		$("#select_all").prop("checked", state);
		//找到goodsNumSum(span标签)对象
		// alert($("input[name='goodsId']:checked"));
		toltoNum();
	});


	//总计件数
	function toltoNum() {
		// var sum=0;
		// //获取商品列表为true的数量和
		// var goodsIdArr=("input[name=goodsId]");
		// for(var i=0;i<goodsIdArr.length;i++)
		// {
		// 	if(goodsIdArr[i].checked)
		// 	{sum++;}
		// }
		// return sum;


		//js对象的方法为innerHTML，jquery对象的方法为html
		$(".goodsNumSum").html($("input[name='goodsId']:checked").length);
	}

	//每件小计(计算价格)
	//使用小计功能时在数量改变时候触发
	//但是不同的数量改变时应该改变相应的内容
	//同时加减触发是不同的
	// function colPrice(){
	// 	var price=0;
	// 	price=Number($(this).parent().children(".price").val())*Number($(this).parent().children(".line2-num").val());
	// 	alert(price);
	// 	$(".colPrice").html(price);
	// }



	//消费总计
	// function spendSum(){
	// 	//首先判断输入框状态，只将check状态ture的小计相加
	// 	$("input[name=goodsId]:check").each(function(){
	// 		//会改变数值的按键为+-和勾选
	// 	});
	// }
	function spendSum() {
		var sum = 0;
		// alert("hello");
		//判断所有复选框状态
		$("input[name='goodsId']:checked").each(function() {
			// alert("hello");
			$(this).parent().parent().children().children(".colPrice").each(function() {
				// alert($(this).text());
				sum += Number($(this).text());
			});
		});
		$(".spendSum").html(sum);
	}


	//删除
	$(".line2-del").click(function() {
		$(this).parent().parent().parent().remove();
	});


	//批量删除
	$(".result-middle").click(function() {
		//点击批量删除，删除掉所有被勾选的内容
		$("input[name='goodsId']:checked").each(function() {
			$(this).parent().parent().remove();
		});
	});
});