使用jquery删除拖放购物车的按钮
我是jquery的新手。我目前正在开发一个网站，作为我项目的一部分。我可以在购物车中拖放产品，但我无法向其添加删除按钮，也无法在从购物车中删除项目后更改总数 我尝试了所有可能的方法，也看到了复制品，但它对我不起作用 我没有办法，请帮帮我。 我会感激你们所有人 头 JS使用jquery删除拖放购物车的按钮,jquery,jquery-ui,drag-and-drop,shopping-cart,jquery-easyui,Jquery,Jquery Ui,Drag And Drop,Shopping Cart,Jquery Easyui,我是jquery的新手。我目前正在开发一个网站，作为我项目的一部分。我可以在购物车中拖放产品，但我无法向其添加删除按钮，也无法在从购物车中删除项目后更改总数 我尝试了所有可能的方法，也看到了复制品，但它对我不起作用 我没有办法，请帮帮我。 我会感激你们所有人 头 JS var数据={“总计”：0，“行”：[]； var总成本=0； $（函数（）{ $（'#cartcontent'）.datagrid({ singleSelect:true }); $（'.item'）。可拖动({ 回复：对，
var数据={“总计”：0，“行”：[]；
var总成本=0；
$（函数（）{
$（'#cartcontent'）.datagrid({
singleSelect:true
});
$（'.item'）。可拖动({
回复：对，
代理：'clone'，
onStartDrag:function（）{
$（this）.draggable（'options'）。游标='不允许'；
$（this）.draggable（'proxy'）.css（'z-index'，10）；
},
onStopDrag:function（）{
$（this）.draggable（'options'）.cursor='move'；
}
});
$（'.cart'）。可拖放({
onDragEnter:函数（e，源）{
$（源）.draggable（'options'）.cursor='auto'；
},
onDragLeave：函数（e，源）{
$（source）.draggable（'options'）。cursor='not-allowed'；
},
onDrop：函数（e，源）{
var name=$（source.find（'p:eq（0）'）.html（）；
var price=$（source.find（'p:eq（1）'）.html（）；
addProduct（名称，parseFloat（price.split（“$”）[1]）；
}
});
});
功能添加产品（名称、价格）{
函数add（）{
对于（var i=0；i我在您的购物车表中又添加了一列Remove
HTML
我还将JSFIDLE选项onLoad
更改为No wrap-in
，因此data
和totalCost
可以在全球范围内访问
使用这种疯狂的预格式化CSS…不，我只是想让你的问题更清晰，希望“有人”能回答，但我老实说，我甚至不想尝试。上面的代码仅适用于单个购物车，如果你有多个购物车使用同一产品，那么你可以加载多个数据网格比如$（“#cartcontent”）.datagrid（'loadData'，data）；
$（'cartcontent1'）。datagrid（'loadData'，data）；
$（'cartcontent2'）。datagrid（'loadData'，data）；
我对您的代码做了很多尝试。我想知道是否可以只使用标准的jQuery UI而不是外部的（JeasUI
）使用here？方法的OP，如datagrid
，似乎非常特定于这个外部用户界面。@posted
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</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>
.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;
right:0;
top:0;
width:300px;
height:100%;
background:#ccc;
padding:0px 10px;
}
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;
}
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]));
}
});
});
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);
}
<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</h1>
<div style="background:#fff">
<table id="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>
</tr>
</thead>
</table>
</div>
<p class="total">Total: $0</p>
<h2>Drop here to add to cart</h2>
</div>
</body>
<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> // Added here
data.rows.push({
name: name,
quantity: 1,
price: price,
remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>' // Added here
});
function removeProduct(el, event) {
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.total; i++) {
var row = data.rows[i];
if (row.name == name) {
data.rows.splice(i, 1);
data.total--;
break;
}
}
totalCost -= price * quantity;
$('#cartcontent').datagrid('loadData', data);
$('div.cart .total').html('Total: $' + totalCost);
}