首页 前端知识 jQuery实现购物车的操作

jQuery实现购物车的操作

2024-04-23 21:04:37 前端知识 前端哥 453 923 我要收藏

jQuery实现购物车


#购物车操作步骤:

一、实现购物车的全选和全不选功能及背景的添加和删除
二、实现数量模块的增加和减少
三、实现输入值改变商品的小计
四、用求和函数实现求和相加总价和总数量
五、实现商品的删除


提示:以下是本篇文章正文内容,下面案例可供参考。用$(function(){ 一、二、三、四、五...})来实现

一、实现购物车商品的全选和全不选及背景的添加和删除

1、当点击全选按钮时实现商品的全选和全不选

操作步骤:

核心思想:当点击全选按钮checkall的时候,要用全选按钮的状态设置给三个商品里面的按钮j-checkbox的状态

①当点击全选按钮checkall的时候,用change事件来给三个商品里面的按钮j-checkbo设置成选中的状态。
②通过并集选择器获取checkall和j_checkbox,并用prop()方法设置checked属性为checked状态
③如果checkall的属性为checked状态即选中全选按钮,则全选的商品背景颜色就会添加上(用addClass()方法实现类的添加),否则删除背景颜色(用removeClass()方法实现类的删除)。

代码如下(示例):

//当点击全选按钮时,j-checkbox的状态发生改变
$('.checkall').change(function(){
$('.checkall,j-checkbox').prop("checked",$(this).prop("checked"));
//背景色的添加和删除
if($(this).prop("checked")){
$('.cart-item').addClass('check-cart-item')
	}else{
		$('.cart-item').removeClass('check-cart-item')
	}
})

2、从商品列表的内部来实现单个选中,全选和全不选功能

操作步骤

核心思想:判断若商品列表内选中的商品个数==3,就要选中全选按钮,否则不选中全选按钮

①给j-checkbox添加点击事件,用:checked选择器表示被选中的j-checkbox,并判断其length是否等于商品列表内的全部商品个数。
②并用prop(“checked”,true/false)方法设置全选框checkall的属性,选中为true,未选中为false.
③如果单个商品被选中,即属性为checked状态,则给相对应的商品(cart-item)用addClass()方法添加背景色,否则removeClass()删除背景色

代码如下(示例):

判断商品列表内选中的商品个数==3,就要选中全选按钮,否则不选中全选按钮
 $('.j-checkbox').click(function(){ 
	if($('.j-checkbox:checked').length==3){
	  $('.checkall').prop("checked",true)
	}else{
	 $('.checkall').prop("checked",false)
	 }
	//如果选中背景色改变
	if($(this).prop("checked")){
	//获取到相对应的cart-item,用多个parent()或直接用parents()
	$(this).parent().parent(".cart-item").addClass('check-cart-item');	
 }else{
	$(this).parent().parent(".cart-item").removeClass('check-cart-item')
		}
   })

二、实现数量模块的增加和减少

1、实现数量模块的增加

操作步骤:

核心思想:点击+时,需要有一个变量实现自增功能,后把变量的值给文本框

①获取数量添加按钮increment给其添加一个click点击事件,获取input控件的value中的值用val()方法,n++实现自增,即每次点击“+”就会实现数量的自增
②获取当前元素的父级的父级的兄弟的元素单价(p-price)中的内容,在这里用html()或text()方法都可以,因为内容中有¥符号,而html获取的是字符串,所以用substr(1)截取¥后面的字符串
③计算总价sum=(p*n).toFixed(2);toFixed()方法保留两位小数
④用html()给p-sum总价赋值,“¥”+sum拼接字符串

代码如下(示例):

$('.increment').click(function(){
	   //定义一个变量,初始值等于input中的value值
	   var n=$(this).siblings('.itxt').val();
	   n++;
	   $(this).siblings('.itxt').val(n);
	   //小计的改变
	   var p=$(this).parent().parent().siblings(".p-price").html().substr(1);//substr截取字符串从0开始的,去掉0从1开始留
	   var sum=(p*n).toFixed(2);//保留两位小数
	   $(this).parent().parent().siblings(".p-sum").html("¥"+sum);
	   //getSum();
   })

2.实现数量模块的减少同时改变价格小计

操作步骤:

①获取decrement给其添加click点击事件,操作方法与商品数量的增加相同
②注意只有当商品数量大于1个时才可以点击“-”减少商品,所以要添加一个if语句
③当商品数量小于1时,再点击“-”会弹出‘是否删除该商品’,要放在return语句之前。

代码如下(示例):

$('.decrement').click(function(){
   	   //定义一个变量,初始值等于input中的value值
   	   var m=$(this).siblings('.itxt').val();
	   if(m>1){
		   m--;
		   $(this).siblings('.itxt').val(m);
		   var p=$(this).parent().parent().siblings(".p-price").html().substr(1);//substr截取字符串从0开始的,去掉0从1开始留
		   var sum=(p*m).toFixed(2);//保留两位小数
		   $(this).parent().parent().siblings(".p-sum").html("¥"+sum);
		
	 }else{
//return语句要在其他语句之后,不然就不执行了
		   alert('是否删除该商品');
		   return false;   
	   }
	    //getSum();
   	 })

三、输入值改变商品的小计

操作步骤:

核心思想:获取输入的值,再进行数量和总价的改变

①获取input控件用类名,添加change事件用回调函数实现该功能
②数量和总价的计算方法与二相同

代码如下(示例):

$('.itxt').change(function(){  
     var n=$(this).val();
	var p=$(this).parent().parent().siblings(".p-price").html().substr(1);
	 var sum=(p*n).toFixed(2);
	$(this).parent().parent().siblings(".p-sum").html("¥"+sum);
	//getSum();
	})

四、用求和函数实现求和相加总价和总数量

操作步骤:

核心思想:求和相加总价,用求和函数,getSum()调用函数;获取并遍历全部个商品的itxt,用each(function(index,element){})。

①在求和函数getSum()中实现全部商品的遍历,首先定义初始商品数量count和价格price
②用each()方法遍历每个商品itxt,实现count的累加
③用text()给总数量赋值
④总价的求和与总量求和相同,不要忘记保留小数位数,字符串的截取和拼接
⑤最后不要忘记调用函数!!getSum();
在其他功能中也要调用该函数实现总价和总数量的计算

代码如下(示例):

//求和函数
      getSum();
	function getSum(){
		//定义一个数量初始值
		var count=0;
		var price=0;
		//获取并遍历全部商品的itxt
		$('.itxt').each(function(index,element){
			count+=parseInt($(element).val()); //通过val获得的是字符型,要强转
	})
	     $('.amount-sum em').text(count);   //数量赋值
		 //价格
		 $('.p-sum').each(function(i,ele){
		price+=parseFloat($(ele).text().substr(1));
	}) 
		 $('.price-sum em').text("¥"+price.toFixed(2));	 
	}

五、实现商品的删除

1、删除单个商品

操作步骤:

核心思想:remove()方法删除元素,作用对象是元素!

①用后代选择器选择出删除选项,添加点击事件
②给当前元素的商品用remove()方法删除掉该商品
③同时不要忘记总数量和总价的改变

代码如下(示例):

 $('.p-action a').click(function(){  
  $(this).parent().parent('.cart-item').remove();
	//删除后总价和数量变化
		 getSum();
   })

2、删除选中的商品

代码如下(示例):

$('.remove-batch').click(function(){
	   //选择器
	 $('.j-checkbox:checked').parent().parent('.cart-item').remove();
	 getSum();
   })

3、删除全部商品

代码如下(示例):

 $('.clear-all').click(function(){
		 $('.cart-item').remove();
		  getSum();
	 })

最后的实现效果:

在这里插入图片描述

总结

其中应用了以下知识点:
①jQuery的文本属性的获取和设置,html(),text(),val()方法
②:checked 选择器
③string.substr(start, length);截取字符串
④NumberObject.toFixed(num);设置保留小数的位数
⑤parent()和parents()方法。parents()可以查找出所有父类,包括body,html,也可以指定查找父级的父级元素。
⑥remove()方法。remove()方法移除被选元素,包括所有的文本和子节点;注意:如需移除元素,但保留数据和事件,使用 detach()方法代替;如只需从被选元素移除内容,使用 empty()方法。
⑦该方法也会移除被选元素的数据和事件。
each()方法遍历元素,同一类元素进行不同的操作;注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。获取DOM对象时不加引号
eg:

<div>123</div>
<div>www</div>
<div>张三</div>
<div>李四</div>
<script type="text/javascript">
//定义一个数组
var arr=['red','yellow','blue','pink'];
//each遍历
$('div').each(function(index,element){
//index:回调函数的第一个参数一定是索引号,可以自己指定名称
//element:第二个参数一定是dom元素对象,可以自己命名
console.log(element);
$(element).css("color",arr[index]);
//=$(this).css("color",arr[index]);
})
</script>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5845.html
标签
评论
发布的文章

【Java】JSONArray详解

2024-04-30 12:04:14

Unity——LitJSON的安装

2024-04-30 12:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!