希望有人能帮助我。
在此论坛上检查了其他类似的问题，但仍然无法解决此问题。
尝试使用HTML5(拖放(和JavaScript创建一个简单的购物车。我从在线教程中复制了下面的大部分代码(代码是开源的，可以免费使用(。我想扩展代码，以便在将商品拖入购物车区域时，显示购物车中所有商品的总成本。随着更多项目的添加，此总数将更新。
此外，我正在尝试更新代码，以便用户可以购买任何商品中的多件商品，并试图让显示屏也显示购物车中每件商品的数量。
我添加了一个 updateCart(( 函数，但我对如何让它正常工作感到困惑(显然它没有按预期运行(。由于原始代码的拖放正在工作，因此问题一定出在我的updateCart功能中。
我在商店商品的 li 标签中添加了"数据价格"和"数据数量"属性。我试图显示总价，但尚未查看商品数量。
任何建议将不胜感激。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Drag and drop in HTML 5, demonstration with a shop</title>
<style>
body {
padding:32px;
}
.shop {
border-radius:6px;
list-style-type:none;
padding:0;
margin:0;
}
.shop li{
display:inline;
}
.cart {
border: 4px solid #0066FF;
border-radius:6px;
min-height:128px;
display:block;
}
.product {
border:3px solid white;
}
.product:hover {
border:3px solid red;
cursor:move;
}
.itemchoosen {
this.style.opacity = 0.5;
this.style.border = "2px solid red";
}
.itemblurred {
this.style.border = none;
}
#cartArea {
position: relative;
height: 200px;
width: 100%;
float: left;
border: 1px dotted #999;
}
</style>
</head>
<body >
<fieldset><legend>The shop</legend>
<ul id="shop" class="shop">
<li data-price="30.00" data-quantity="1"><img class="product" id="chair" src="images/chair.jpg" width="96" height="96"></li>
<li data-price="250.00" data-quantity="1"><img class="product" id="monitor" src="images/screen.jpg" width="96" height="96"></li>
<li data-price="80.00" data-quantity="1"><img class="product" id="bag" src="images/bag.jpg" width="96" height="96"></li>
<li data-price="350.00" data-quantity="1"><img class="product" id="transat" src="images/transat.jpg" width="96" height="96"></li>
</ul>
</fieldset>
<fieldset id="mycart" class="cart"><legend>My cart</legend>
<div id="cartArea"></div>
</fieldset>
<fieldset id="mycart" class="cart"><legend>Total</legend>
<p id="the_sub_total"></p>
<p id="the_total"></p>
</fieldset>
<script>
var cartArea = document.querySelector('#cartArea');
var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
prods[i].setAttribute('draggable', 'true'); // optional with images
prods[i].addEventListener('dragstart', function(evnt) {
this.className = 'itemchoosen';
evnt.dataTransfer.effectAllowed = 'copy';
evnt.dataTransfer.setData('text', this.id);
return false;
}, false);
}
cartArea.addEventListener('dragover', function(evnt) {
if (evnt.preventDefault) evnt.preventDefault();
evnt.dataTransfer.dropEffect = 'copy';
return false;
}, false);
cartArea.addEventListener('dragenter', function(evnt) {
return false;
}, false);
cartArea.addEventListener('dragleave', function(evnt) {
return false;
}, false);
cartArea.addEventListener('drop', function(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation();
var id = evnt.dataTransfer.getData('text');
var theitem = document.getElementById(id);
//theitem.parentNode.removeChild(el);
theitem.className='itemblurred';
var y = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);
evnt.preventDefault(); // for Firefox
updateCart();
return false;
}, false);
function updateCart(){
var total = 0.0;
var cart_items = document.querySelectorAll("#shop 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));
//document.querySelectorAll("#the_sub_total")[0].innerHTML = " = " + sub_total.toFixed(2);
total += sub_total;
}
document.querySelectorAll("#the_total")[0].innerHTML = total.toFixed(2);
}
</script>
</body>
</html>
尝试使用以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Drag and drop in HTML 5, demonstration with a shop</title>
<style>
body {
padding:32px;
}
.shop {
border-radius:6px;
list-style-type:none;
padding:0;
margin:0;
}
.shop li{
display:inline;
}
.cart {
border: 4px solid #0066FF;
border-radius:6px;
min-height:128px;
display:block;
}
.product {
border:3px solid white;
}
.product:hover {
border:3px solid red;
cursor:move;
}
.itemchoosen {
this.style.opacity = 0.5;
this.style.border = "2px solid red";
}
.itemblurred {
this.style.border = none;
}
#cartArea {
position: relative;
height: 200px;
width: 100%;
float: left;
border: 1px dotted #999;
}
</style>
</head>
<body >
<fieldset><legend>The shop</legend>
<ul id="shop" class="shop">
<li data-price="30.00" data-quantity="1"><img class="product" id="chair" src="images/chair.jpg" width="96" height="96"></li>
<li data-price="250.00" data-quantity="1"><img class="product" id="monitor" src="images/screen.jpg" width="96" height="96"></li>
<li data-price="80.00" data-quantity="1"><img class="product" id="bag" src="images/bag.jpg" width="96" height="96"></li>
<li data-price="350.00" data-quantity="1"><img class="product" id="transat" src="images/transat.jpg" width="96" height="96"></li>
</ul>
</fieldset>
<fieldset id="mycart" class="cart"><legend>My cart</legend>
<div id="cartArea"></div>
</fieldset>
<fieldset id="mycart" class="cart"><legend>Total</legend>
<p id="the_sub_total"></p>
<p id="the_total"></p>
</fieldset>
<script>
var total = 0.0;
var cartArea = document.querySelector('#cartArea');
var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
prods[i].setAttribute('draggable', 'true'); // optional with images
prods[i].addEventListener('dragstart', function(evnt) {
this.className = 'itemchoosen';
evnt.dataTransfer.effectAllowed = 'copy';
evnt.dataTransfer.setData('text', this.id);
return false;
}, false);
}
cartArea.addEventListener('dragover', function(evnt) {
if (evnt.preventDefault) evnt.preventDefault();
evnt.dataTransfer.dropEffect = 'copy';
return false;
}, false);
cartArea.addEventListener('dragenter', function(evnt) {
return false;
}, false);
cartArea.addEventListener('dragleave', function(evnt) {
return false;
}, false);
cartArea.addEventListener('drop', function(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation();
var id = evnt.dataTransfer.getData('text');
var theitem = document.getElementById(id);
console.log(theitem.parentNode.attributes);
var quantity=theitem.parentNode.attributes['data-quantity'].value;
var price = theitem.parentNode.attributes['data-price'].value;
console.log(price);
theitem.className='itemblurred';
var y = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);
evnt.preventDefault(); // for Firefox
updateCart(quantity,price);
return false;
}, false);
function updateCart(quantity,price){
var sub_total = parseFloat(quantity * parseFloat(price));
total = total+sub_total;
document.getElementById('total').value= total;
document.querySelectorAll("#the_total")[0].innerHTML = total.toFixed(2);
}
</script>
</body>
</html>
更新的代码：
您正在updateCart((中运行一个循环，首先获取所有商品的价格，然后检查购物车中有哪些商品，相反，您可以将价格作为updateCart((函数中的参数发送，因为您已经获得了最近在cartArea.addEventListener('drop', function(evnt)中删除的元素。
如果需要，您可以向购物车区域添加滚动。
但我不明白你为什么在这里使用sub_total，如果你想在物品图像下方显示商品价格，那么没有必要。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Drag and drop in HTML 5, demonstration with a shop</title>
<style>
body {
padding:32px;
}
.shop {
border-radius:6px;
list-style-type:none;
padding:0;
margin:0;
}
.shop li{
display: inline-table;
}
.cart {
border: 4px solid #0066FF;
border-radius:6px;
min-height:128px;
display:block;
padding: 20px 10px;
}
.product {
border:3px solid white;
}
.product:hover {
border:3px solid red;
cursor:move;
}
.itemchoosen {
this.style.opacity = 0.5;
this.style.border = "2px solid red";
}
.itemblurred {
this.style.border = none;
}
#cartArea {
position: relative;
min-height: 200px;
width: 100%;
float: left;
}
#cartArea img {
float: left;
width: 20%;
margin: 2%;
}
.itemPrice {
width: 100%;
float: left;
}
</style>
</head>
<body >
<fieldset><legend>The shop</legend>
<ul id="shop" class="shop">
<li><img class="product" id="chair" src="images/chair.jpg" width="96" height="96" data-price="30.00" data-quantity="1"></li>
<li><img class="product" id="monitor" src="images/screen.jpg" width="96" height="96" data-price="250.00" data-quantity="1"></li>
<li><img class="product" id="bag" src="images/bag.jpg" width="96" height="96" data-price="80.00" data-quantity="1"></li>
<li><img class="product" id="transat" src="images/transat.jpg" width="96" height="96" data-price="350.00" data-quantity="1"></li>
</ul>
</fieldset>
<fieldset id="mycart" class="cart">
<legend>My cart</legend>
<div id="cartArea"></div>
</fieldset>
<fieldset id="mycart" class="cart">
<legend>Total</legend>
<p id="the_sub_total"></p>
<p id="the_total">0</p>
</fieldset>
<script>
var cartArea = document.querySelector('#cartArea');
var prods = document.querySelectorAll('.product');
var itemPriceElement;
for(var i = 0; i < prods.length; i++) {
itemPriceElement = document.createElement("span");
itemPriceElement.className = "itemPrice";
itemPriceElement.innerHTML = prods[i].getAttribute("data-price");
prods[i].parentNode.insertBefore(itemPriceElement, prods[i].nextSibling);
prods[i].setAttribute('draggable', 'true'); // optional with images
prods[i].addEventListener('dragstart', function(evnt) {
//this.className = 'itemchoosen';
this.classList.add('itemchoosen');
evnt.dataTransfer.effectAllowed = 'copy';
evnt.dataTransfer.setData('text', this.id);
return false;
}, false);
}
cartArea.addEventListener('dragover', function(evnt) {
if (evnt.preventDefault) evnt.preventDefault();
evnt.dataTransfer.dropEffect = 'copy';
return false;
}, false);
cartArea.addEventListener('dragenter', function(evnt) {
return false;
}, false);
cartArea.addEventListener('dragleave', function(evnt) {
return false;
}, false);
cartArea.addEventListener('drop', function(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation();
var id = evnt.dataTransfer.getData('text');
var theitem = document.getElementById(id);
//theitem.parentNode.removeChild(el);
//theitem.className='itemblurred';
theitem.classList.add('itemblurred');
var y = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);
evnt.preventDefault(); // for Firefox
updateCart(theitem.getAttribute("data-price"));
return false;
}, false);
function updateCart(price){
var the_total = document.getElementById("the_total").innerHTML;
the_total = parseInt(the_total);
the_total = the_total + parseInt(price);
document.getElementById("the_total").innerHTML = the_total;
}
</script>
</body>
</html>