我正在为网上商店的购物车编程，尽管我已经弄清楚了大部分，但当我将2件相同商品添加到购物车中时，它在列表中显示2次，而不是2次，但是价钱。在没有改变我已经完成的大部分工作的情况下，有什么方法可以解决这个问题？
body {
background: #97CE98;
}
.btn-group {
display: grid;
grid-template-columns: 4;
grid-row: 5 minmax(100px, auto);
grid-gap: 5px;
}
.one {
grid-column: 1/4;
grid-row: 1;
display: flex;
}
.two {
grid-column: 2/4;
grid-row: 1;
display: flex;
}
.three {
grid-column: 3/4;
grid-row: 1;
display: flex;
}
.four {
grid-column: 4/4;
grid-row: 1;
display: flex;
}
.five {
grid-column: 1/4;
grid-row: 2;
display: flex;
}
.six {
grid-column: 2/4;
grid-row: 2;
display: flex;
}
.seven {
grid-column: 3/4;
grid-row: 2;
display: flex;
}
.eight {
grid-column: 4/4;
grid-row: 2;
display: flex;
}
.nine {
grid-column: 1/4;
grid-row: 3;
display: flex;
}
.ten {
grid-column: 2/4;
grid-row: 3;
display: flex;
}
.eleven {
grid-column: 3/4;
grid-row: 3;
Display: flex;
}
.twelve {
grid-column: 4/4;
grid-row: 3;
display: flex;
}
.thirteen {
grid-column: 1/4;
grid-row: 4;
display: flex;
}
.fourteen {
grid-column: 2/4;
grid-row: 4;
display: flex;
}
.fifteen {
grid-column: 3/4;
grid-row: 4;
display: flex;
}
.sixteen {
grid-column: 4/4;
grid-row: 4;
display: flex;
}
.seventeen {
grid-column: 1/4;
grid-row: 5;
display: flex;
}<!-- removed all the "onclick" attributes as this (attaching event listeners) will be placed in the JavaScript part -->
<!-- added a class of "btn-click-count" to all the buttons that will have counters -->
<p align="center">TPG Product Counter</p>
<div align="center" class="btn-group">
<div class="one">
<button class="btn-click-count" style="width:20%" id="demo1">Minced Hot 8oz </button>
</div>
<div class="two">
<button class="btn-click-count" style="width:20%" id="demo2">Minced Hot 16oz </button>
</div>
<div class="three">
<button class="btn-click-count" style="width:20%" id="demo3">Mindced Hot 24oz </button>
</div>
<div class="four">
<button class="btn-click-count" style="width:20%" id="demo4">Chunky Hot 8oz </button>
</div>
<div class="five">
<button class="btn-click-count" style="width:20%" id="demo5">Chunky Hot 16oz </button>
</div>
<div class="six">
<button class="btn-click-count" style="width:20%" id="demo6">Chunky Hot 24oz </button>
</div>
<div class="seven">
<button class="btn-click-count" style="width:20%" id="demo7">Hot Minced 8oz </button>
</div>
<div class="eight">
<button class="btn-click-count" style="width:20%" id="demo8">Hot Minced 8oz </button>
</div>
<div class="nine">
<button class="btn-click-count" style="width:20%" id="demo9">Hot Minced 8oz </button>
</div>
<div class="ten">
<button class="btn-click-count" style="width:20%" id="demo10">Hot Minced 8oz </button>
</div>
<div class="eleven">
<button class="btn-click-count" style="width:20%" id="demo11">Hot Minced 8oz </button>
</div>
<div class="twelve">
<button class="btn-click-count" style="width:20%" id="demo12">Hot Minced 8oz </button>
</div>
<div class="thirteen">
<button class="btn-click-count" style="width:20%" id="demo13">Hot Minced 8oz </button>
</div>
<div class="fourteen">
<button class="btn-click-count" style="width:20%" id="demo14">Hot Minced 8oz </button>
</div>
<div class="fifteen">
<button class="btn-click-count" style="width:20%" id="demo15">Hot Minced 8oz </button>
</div>
<div class="sixteen">
<button class="btn-click-count" style="width:20%" id="demo16">Hot Minced 8oz </button>
</div>
<div class="seventeen">
<button class="btn-click-count" style="width:20%" id="demo17">Hot Minced 8oz </button>
</div>
</div>window.onload = function () {
var baseDeDatos = [
{
id: 1,
nombre: 'Trim',
precio: 1399,
categoria: 'Buzo',
img: 'img/1.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 2,
nombre: 'Rainbow',
precio: 990,
categoria: 'Buzo',
img: 'img/2.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 3,
nombre: 'White',
precio: 948,
categoria: 'Buzo',
img: 'img/3.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 4,
nombre: 'Cycle',
precio: 550,
categoria: 'Buzo',
img: 'img/4.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 5,
nombre: 'Cellie',
precio: 590,
categoria: 'Buzo',
img: 'img/5.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 6,
nombre: 'Leo',
precio: 2890,
categoria: 'Buzo',
img: 'img/6.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 7,
nombre: 'Today',
precio: 499,
categoria: 'Buzo',
img: 'img/7.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 8,
nombre: 'Sky',
precio: 499,
categoria: 'Buzo',
img: 'img/8.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 9,
nombre: 'Regan',
precio: 590,
categoria: 'Buzo',
img: 'img/9.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 10,
nombre: 'Polly',
precio: 1399,
categoria: 'Remera',
img: 'img/10.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 11,
nombre: 'June',
precio: 799,
categoria: 'Remera',
img: 'img/11.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 12,
nombre: 'Amy',
precio: 1299,
categoria: 'Remera',
img: 'img/12.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 13,
nombre: 'Tai',
precio: 648,
categoria: 'Top',
img: 'img/13.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 14,
nombre: 'Judy',
precio: 3290,
categoria: 'Remera',
img: 'img/14.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 15,
nombre: 'Grey',
precio: 1090,
categoria: 'Top',
img: 'img/15.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 16,
nombre: 'Pinky',
precio: 1090,
categoria: 'Top',
img: 'img/16.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 17,
nombre: 'Line',
precio: 1090,
categoria: 'Top',
img: 'img/17.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
},
{
id: 18,
nombre: 'Line',
precio: 1090,
categoria: 'Buzo',
img: 'img/18.jpg',
descripcion: 'Buzo con diseño colorblock neon.'
}
]
var $items = document.querySelector('#items');
var carrito = [];
var total = 0;
var $carrito = document.querySelector('#carrito');
var $total = document.querySelector('#total');
function renderItems () {
for (var info of baseDeDatos) {
var miNodo = document.createElement('div');
miNodo.classList.add('card', 'col-md-6');
var miNodoCardBody = document.createElement('div');
miNodoCardBody.classList.add('card-body');
var miNodoTitle = document.createElement('h5');
miNodoTitle.classList.add('card-title');
miNodoTitle.textContent = info['nombre'] + ' / ' + info['categoria'];
var miNodoImg = document.createElement('img');
miNodoImg.classList.add('card-text');
miNodoImg.src = info['img'];
var miNodoDesc = document.createElement('p');
miNodoDesc.classList.add('card-text');
miNodoDesc.textContent = info['descripcion'];
var miNodoPrecio = document.createElement('h5');
miNodoPrecio.classList.add('card-text');
miNodoPrecio.textContent = '$' +info['precio'];
var miNodoBoton = document.createElement('button');
miNodoBoton.classList.add('btn', 'btn-primary');
miNodoBoton.textContent = 'Agregar al carrito';
miNodoBoton.setAttribute('marcador', info['id']);
miNodoBoton.addEventListener('click', anyadirCarrito);
miNodoCardBody.appendChild(miNodoImg);
miNodoCardBody.appendChild(miNodoTitle);
miNodoCardBody.appendChild(miNodoDesc);
miNodoCardBody.appendChild(miNodoPrecio);
miNodoCardBody.appendChild(miNodoBoton);
miNodo.appendChild(miNodoCardBody);
$items.appendChild(miNodo);
}
}
function anyadirCarrito () {
carrito.push(this.getAttribute('marcador'))
calcularTotal();
renderizarCarrito();
}
function renderizarCarrito () {
$carrito.textContent = '';
carrito.forEach(function (item, indice) {
var miItem = baseDeDatos.filter(function(itemBaseDatos) {
return itemBaseDatos['id'] == item;
});
var miNodo = document.createElement('li');
miNodo.classList.add('list-group-item', 'text-right');
miNodo.textContent = `${miItem[0]['nombre']} - $${miItem[0]['precio']}`;
var miBoton = document.createElement('button');
miBoton.classList.add('btn', 'btn-danger', 'mx-5');
miBoton.textContent = 'X';
miBoton.setAttribute('posicion', indice);
miBoton.addEventListener('click', borrarItemCarrito);
miNodo.appendChild(miBoton);
$carrito.appendChild(miNodo);
})
}
function borrarItemCarrito () {
var posicion = this.getAttribute('posicion');
carrito.splice(posicion, 1);
renderizarCarrito();
calcularTotal();
}
function calcularTotal () {
total = 0;
for (var item of carrito) {
var miItem = baseDeDatos.filter(function(itemBaseDatos) {
return itemBaseDatos['id'] == item;
});
total = total + miItem[0]['precio'];
}
var totalDosDecimales = total.toFixed(2);
$total.textContent = totalDosDecimales;
}
renderItems();
}
答案 0 :(得分：0)
在添加商品之前，尝试检查商品是否已经在购物车中。
在此行carrito.push（this.getAttribute（'marcador'））之前，按ID检查项目是否在carrito数组中，如果是，则遵循您的逻辑，如果不是，请执行以下操作-添加功能以将项目价格提高到现有价格对于该产品（不要加倍，因为有可能第三次或第四次添加相同的商品）。