要让多个购物车独立工作，您必须将购物车数据存储在 array 和 index 中。并将index 传递给addProduct 和removeProduct functions。对于购物车内容，请使用 class 而不是 id
更新代码如下：
HTML
<!doctype html>
<html>
<head>
<title>Multiple Carts</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.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>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
<ul class="products">
<li>
<a href="#" class="item">
<img src="images/shirt1.gif"/>
<div>
<p>Balloon</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt2.gif"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt3.gif"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt4.gif"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt5.gif"/>
<div>
<p>Monogram</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt6.gif"/>
<div>
<p>Rolling</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
<div class="cart">
<h1>Shopping Cart 1</h1>
<div style="background:#fff">
<table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
<div class="cart">
<h1>Shopping Cart 2</h1>
<div style="background:#fff">
<table class="cartcontent" fitColumns="true" style="width:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
</body>
</html>
CSS
.products{
list-style:none;
margin-right:300px;
padding:0px;
height:100%;
}
.products li{
display:inline;
float:left;
margin:10px;
}
.item{
display:block;
text-decoration:none;
}
.item img{
border:1px solid #333;
}
.item p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.cart{
position:fixed;
top: 0;
right:0;
width:300px;
height:50%;
background:#ccc;
padding:0px 10px;
}
.cart:nth-child(odd){
top:50% !important;
}
h1{
text-align:center;
color:#555;
}
h2{
position:absolute;
font-size:16px;
left:10px;
bottom:20px;
color:#555;
}
.total{
margin:0;
text-align:right;
padding-right:20px;
}
JS
var data = [];
$(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 $source = $(source);
var name = $source.find('p:eq(0)').text();
var price = $source.find('p:eq(1)').text();
addProduct($('.cart').index($(e.currentTarget)), name, parseFloat(price.split('$')[1]));
}
});
});
function loadData(cartIndex, event) {
var $cart = $('.cart:eq(' + cartIndex + ')');
$cart.find('.cartcontent').datagrid('loadData', data[cartIndex]);
$cart.find('.total').text('Total: $' + data[cartIndex].total);
}
function addProduct(cartIndex, name, price) {
function add() {
if (!data[cartIndex]) {
data[cartIndex] = {
length: 0,
total: 0,
rows: []
};
}
for (var i=0; i < data[cartIndex].length; i++) {
var row = data[cartIndex].rows[i];
if (row.name === name) {
row.quantity += 1;
return;
}
}
data[cartIndex].length++;
data[cartIndex].rows.push({
name: name,
quantity: 1,
price: price,
remove: '<a href="#" class="remove" onclick="removeProduct(' + cartIndex + ', this)">X</a>'
});
}
add();
data[cartIndex].total += price;
loadData(cartIndex);
}
function removeProduct(cartIndex, el) {
var tr = $(el).closest('tr');
var name = tr.find('td[field=name]').text();
var price = tr.find('td[field=price]').text();
var quantity = tr.find('td[field=quantity]').text();
for(var i = 0; i < data[cartIndex].length; i++){
var row = data[cartIndex].rows[i];
if (row.name == name) {
data[cartIndex].rows.splice(i, 1);
data[cartIndex].length--;
break;
}
}
data[cartIndex].total -= price * quantity;
loadData(cartIndex);
}
JS Fiddle