JS避免购物车重复添加商品的demo

最新推荐文章于 2022-10-25 15:40:41 发布

不染丶烟雨

最新推荐文章于 2022-10-25 15:40:41 发布

阅读量1.8k

点赞数 3

分类专栏： js 文章标签： jquery html javascript css

本文链接：https://blog.csdn.net/qq_43447479/article/details/105528815

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面是我自己写的一个简单的demo,希望对你能有所帮助！
里面包含添加商品时动态显示商品价格，避免重复添加商品，以及批量删除商品。我是在HbuilderX上写的，代码复制后可直接运行。
（如果写的有哪些不好的地方请指出来，或者有什么疑惑也可以在评论区评论我会尽快回复的，2333！！！）
下面是效果图：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQ-demo</title>
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.js"></script>
</head>
<body>
    <div class="container">
        <div class="header"><h1>购物车</h1></div>
        <div class="toolbar">
            商品名称：
            <select id="sel_name">
                <option value="6.2">苹果</option>
                <option value="7.3">香蕉</option>
                <option value="20.8">榴莲</option>
                <option value="8.5">橙子</option>
                <option value="10.5">西瓜</option>
            </select>
            商品价格：
            <input id="txt_price" type="number" id="txt_price" placeholder="商品价格" min="1" max="100" disabled />
            商品数量：
            <input id="txt_number" type="number" id="txt_count" placeholder="商品数量" min="1" max="100" value="1" />
            <button id="btn_add" class="btn btn-primary">添加</button>
            <button id="btn_delete" class="btn btn-danger">批量删除</button>
        </div>

        <table class="table" id="chart">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select_all" /></th>
                    <th>商品名称</th>
                    <th>商品数量</th>
                    <th>单价</th>
                    <th>总价</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
    </div>

    <script>
		var oldCount = null;
		//将商品下拉框中的价格更新到“商品价格”文本框中去
		$("#txt_price").val($("#sel_name").val());
		$("#sel_name").change(function(){
			$("#txt_price").val($("#sel_name").val());
		});
		//添加商品
		$("#btn_add").click(function(){
			var name = $("#sel_name > option:selected").text(),
				price =parseFloat($("#sel_name").val()).toFixed(2),
				count =parseInt($("#txt_number").val()),
				flag = false,//默认为false
				total =parseFloat(price * count).toFixed(2);//parseFloa（）.toFixed(2)精确到小数点第二位
			//循环里面的每一个商品
			$("tbody > tr").each(function () {
			//找到商品的名称与上面获取到的商品名称进行对比
				if ($(this).children().eq(1).text() == name) {
					// alert($(this).children().eq(1).html());
					//找到此商品的数量
					var oldCount =parseInt($(this).children().eq(2).text());
					//商品数量增加。总价跟着变化
					count+=oldCount;
					total = count*price;
					//对商品的数量和总价进行重新复制
					$(this).children().eq(2).text(count);
					$(this).children().eq(4).text(parseFloat(total).toFixed(2));
					//开关为true
					flag = true;
					//跳出循环
					return false;
					}
				});
			    //如果为默认值也就是说里面没有此商品，所以添加此商品。
				if (flag == false) {
					$("#chart > tbody").append(`<tr>
						<td><input name="checkone" type="checkbox" /></td>
						<td>${name}</td>
						<td>${count}</td>
						<td>${price}</td>
						<td>${total}</td>
						<td><button class="btn btn-danger btn-small">&times;</button></td>
						</tr>`);
				}
		});
		//删除商品
		$("#chart").on("click", "button", function(){
			$(this).parent().parent().remove();
		});
		
		//批量删除
		$("#btn_delete").on('click', function() {
			//判断如果没选中 不让删除
		     if($('[name="checkone"]:checked').length==0){
		      alert("请选择要删除的内容!");
		      return;
		     }
		     var dl = confirm("确认要删除选中的内容吗?");
		     if(dl==true){
		      alert("确认删除!");
			  $("tbody > tr").each(function () {
				if ($(this).children().find("input[type=checkbox]").prop("checked")) {
				$(this).remove();
				}
			  })
		     }else if(dl==false){
		      alert("取消删除!");
		     }
		    });
			
			 //点击全选按钮
             $("#select_all").click(function () {
             //子项全部被选中。
              $("tbody > tr").children().find("input[type=checkbox]").prop("checked", $(this).prop("checked"));
			})
    </script>
</body>
</html>

#style.css:
body{
margin: 0;
}
.container{
width: 90%;
min-width: 900px;
margin: auto;
}
.header{
height: 50px;
line-height: 50px;
border-bottom: 1px solid silver;
}
.toolbar{
height: 50px;
display: flex;
align-items: center;
font-size: 14px;
}
.toolbar > *{
margin: 0 8px;
}
/文本框/
select, input[type=‘text’], input[type=‘number’]{
height: 30px;
box-sizing: border-box;
border-radius: 15px;
border: none;
outline: none;
box-shadow: 0 1px 2px 1px rgba(127, 127, 127, 0.3);
padding: 0 15px;
}
select, input[type=‘text’]{
width: 300px;
}
input[type=‘number’]{
width: 100px;
}
select:focus, input[type=‘text’]:focus, input[type=‘number’]:focus{
box-shadow: 0 1px 2px 1px rgba(30, 144, 255, 0.6);
}
/按钮/
.btn{
min-width: 80px;
height: 30px;
border-radius: 4px;
border: none;
background-color: silver;
cursor: pointer;
outline: none;
}
.btn:hover{
opacity: 0.9;
}
.btn-primary{
background-color: #6495ED;
color: white;
}
.btn-primary:active{
background-color: #84A5FF;
}
.btn-danger{
background-color: #DC143C;
color: white;
}
.btn-danger:active{
background-color: #FC244C;
}
.btn-small{
min-width: 40px;
height: 20px;
font-size: 12px;
}
/表格/
.table{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-size: 14px;
}
.table th, .table td{
height: 36px;
padding: 0 5px;
text-align: center;
border: 1px solid #f0f0f0;
}
#chart tr > th:nth-child(1){
width: 80px;
}

不染丶烟雨

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
JS避免购物车重复添加商品的demo

下面是我自己写的一个简单的demo,希望对你能有所帮助！里面包含添加商品时动态显示商品价格，避免重复添加商品，以及批量删除商品。我是在HbuilderX上写的，代码复制后可直接运行。（如果写的有哪些不好的地方请指出来，或者有什么疑惑也可以在评论区评论我会尽快回复的，2333！！！）下面是效果图：<!DOCTYPE html><html><head>...
复制链接

扫一扫

专栏目录