我正在尝试拖放购物车。在互联网上的某个网站的帮助下,我可以在购物车中添加商品,并计算总价。但我无法从购物车中删除所选商品。我是javascript和html5的新手,所以请帮帮我..
代码是:
<script>
function addEvent(element, event, delegate ) {
if (typeof (window.event) != 'undefined' && element.attachEvent)
element.attachEvent('on' + event, delegate);
else
element.addEventListener(event, delegate, false);
}
addEvent(document, 'readystatechange', function() {
if ( document.readyState !== "complete" )
return true;
var items = document.querySelectorAll("section.products ul li");
var cart = document.querySelectorAll("#cart ul")[0];
function updateCart(){
var total = 0.0;
var cart_items = document.querySelectorAll("#cart ul li")
for (var i = 0; i < cart_items.length; i++) {
var cart_item = cart_items[i];
var quantity = cart_item.getAttribute('data-quantity');
var price = cart_item.getAttribute('data-price');
var sub_total = parseFloat(quantity * parseFloat(price));
cart_item.querySelectorAll("span.sub-total")[0].innerHTML = " = " + sub_total.toFixed(2);
total += sub_total;
}
document.querySelectorAll("#cart span.total")[0].innerHTML = total.toFixed(2);
}
function addCartItem(item, id) {
var clone = item.cloneNode(true);
clone.setAttribute('data-id', id);
clone.setAttribute('data-quantity', 1);
var btn=document.createElement('BUTTON');
btn.className = 'remove-item';
var t=document.createTextNode("X");
btn.appendChild(t);
cart.appendChild(btn);
clone.removeAttribute('id');
fragment = document.createElement('span');
fragment.setAttribute('class', 'sub-total');
clone.appendChild(fragment);
cart.appendChild(clone);
$('#product').on('click','.remove-item',function(){
$(this).closest('li').remove();// remove the closest li item row
});
}
function updateCartItem(item){
var quantity = item.getAttribute('data-quantity');
quantity = parseInt(quantity) + 1
item.setAttribute('data-quantity', quantity);
var span = item.querySelectorAll('span.quantity');
span[0].innerHTML = ' x ' + quantity;
}
function onDrop(event){
if(event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
var id = event.dataTransfer.getData("Text");
var item = document.getElementById(id);
var exists = document.querySelectorAll("#cart ul li[data-id='" + id + "']");
if(exists.length > 0){
alert("Already present");
} else {
addCartItem(item, id);
}
updateCart();
return false;
}
function onDragOver(event){
if(event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
return false;
}
addEvent(cart, 'drop', onDrop);
addEvent(cart, 'dragover', onDragOver);
function onDrag(event){
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.dropEffect = "move";
var target = event.target || event.srcElement;
var success = event.dataTransfer.setData('Text', target.id);
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.setAttribute("draggable", "true");
addEvent(item, 'dragstart', onDrag);
};
});
</script>
和
<section id="product">
<ul class="clear">
<li data-id="1">
<a href="#">
<img src="a.jpg" alt="">
<h3>item 1</h3>
<p>xyz</p>
</a>
</li>
</ul>
</secton>
和css是:
<style>
ul, li{
list-style: none;
margin: 0px;
padding: 0px;
cursor: pointer;
}
section#cart ul{
height: 200px;
overflow: auto;
background-color: #cccccc;
}
</style>
答案 0 :(得分:2)
为每个close button
添加cart item
<input type="button" class="remove-item" value="X" />
尝试remove
item-row
,
$('#product').on('click','.remove-item',function(){
$(this).closest('li').remove();// remove the closest li item row
});
答案 1 :(得分:0)
然后尝试此操作以删除购物车中的物品
$(“。remove”)。click(function(e){ pid = $(this).siblings(“#checkIDinput:hidden”)。attr(“ value”);
或--------------------
$(“。remove”)。click(function(e){ pid = $(this).siblings(“ input:hidden”)。attr(“ value”);