Question

我目前正在开办一个大学项目，我们要为想要在线销售产品的公司创建一个网站。当它来到购物车时我遇到了一些困难但幸运的是我能够使用一个正常运行的“拖放”推车来处理我网站上的产品。

我现在陷入困境，我试图添加一个清晰的购物车按钮，它完全按照它所说的“清除所有产品的推车”，但我没有运气。除此之外，我正在努力寻找一个好的来源，可以帮助我将JSON存储与我的购物车一起使用。

这是我必须完成的最后一件事。任何帮助或指南都表示赞赏。

这是编码：

var data = {"total":0,"rows":[]};
		var totalCost = 0;
		
		$(function(){
			$('#cartcontent').datagrid({
				singleSelect:true
			});
			$('.item').draggable({
				revert:true,
				proxy:'clone',
				onStartDrag:function(){
					$(this).draggable('options').cursor = 'not-allowed';
					$(this).draggable('proxy').css('z-index',10);
				},
				onStopDrag:function(){
					$(this).draggable('options').cursor='move';
				}
			});
			$('.cart').droppable({
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
				},
				onDrop:function(e,source){
					var name = $(source).find('p:eq(0)').html();
					var price = $(source).find('p:eq(1)').html();
					addProduct(name, parseFloat(price.split('$')[1]));
				}
			});
		});
		

 $("#clear_cart").click(function(event){
	clearCart();
	displayCart();
});
 
		function addProduct(name,price){
		
			function add(){
				for(var i=0; i<data.total; i++){
					var row = data.rows[i];
					if (row.name == name){
						row.quantity += 1;
						return;
					}
				}
				data.total += 1;
				data.rows.push({
					name:name,
					quantity:1,
					price:price
				});
			}
			add();
			totalCost += price;
			$('#cartcontent').datagrid('loadData', data);
			$('div.cart .total').html('Total: $'+totalCost);			
		}

.products{
			list-style:none;
			margin-right:150px;
			padding:0px;			
		}
		.products li{
			display:inline;
			float:left;
			margin:10px;
		}
		.item{
			display:block;
			text-decoration:none;
			background-color: #edeeef;
		}
		.item img{
				margin: 0 auto;
				border:1px solid #333;
				display: inline-block;
				width: 100%;
				height: 135px;
		}
				
		.cart th
		{
			text-align: center;
		}
		.item p{

			font-weight:bold;
			text-align:center;
			color:#c3c3c3;
		}
		.cart{
			position:absolute;
			right: 0;
			bottom:0;
			width:auto;
			height:60%;
			background:#ccc;
			padding:0px 10px;
			margin: auto;
		}
		.cart h1{
			text-align:center;
			color:#555;
			font-size: 30px;
		}
		
		.cart img{
			padding: 10px;
			height: 50px;
			width: 50px;
		}
		
		h2{
			position:absolute;
			font-size:20px;
			left:10px;
			bottom:20px;
			color:#555;
		}
		.total{
			margin:0;
			text-align:right;
			padding-right:20px;
		}

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>


<article>
	<h5>Men's Bikes</h5>
	<ul class = "products">
		<li>
			<a href = '#' class="item">
				<img src ="Bikes\1.jpg"/>
				<div>
					<p>Stellar</p>
					<p>Price:$1245</p>
				</div>
			</a>			
		</li>
		<li>
			<a href = '#' class="item">
				<img src ="Bikes\41.jpg"/>
				<div>
					<p>Hazdorn</p>
					<p>Price:$1100</p>
				</div>
			</a>
		</li>
		<li>
			<a href = '#' class="item">
				<img src ="Bikes\20.jpg"/>
				<div>
					<p>Drover</p>
					<p>Price:$870</p>
				</div>
			</a>
		</li>
		<li>
			<a href = '#' class="item">
				<img src ="Bikes\6.jpg"/>
				<div>
					<p>Blizzard</p>
					<p>Price:$1780</p>
				</div>
			</a>
		</li>
      </ul>
</article>

<div class="cart">
	<img src="Pictures/basket.png" class="basket"/>
	<h1>Shopping Cart</h1>
	<div style="background:#fff">
	<table id="cartcontent" fitColumns="true" style="width:200px;height:auto;">
		<thead>
			<tr>
				<th field="name" width=200>Name</th>
				<th field="quantity" width=150 align="right">Quantity</th>
				<th field="price" width=100 align="right">Price</th>
			</tr>
		</thead>
	</table>
	</div>
	<p class="total">Total: $0</p>
	<p><input type="button" class="clearbutton" value="Clear Cart" onclick="clear_cart()"></p>
	<h2>Drop here to add to cart</h2>
</div>

P.S。这是我学习与编码有关的第一年。

Answer 1

在这种情况下，您使用data对象作为购物车。要清除它，您需要做的就是重置对象。

data.total = 0
data.rows = []

清除购物车功能和Json Webstorage

1 个答案: