有沒有一種方法可以將多個相同的對象添加到購物車？

Question

我正在為網上商店的購物車編程，盡管我已經弄清楚了其中的大部分，但是當我添加2個相同商品時，購物車在列表中顯示2次，而不是一次，但價格翻了一番。 我有什么辦法可以解決這個問題而又不改變我已經完成的大部分工作？

 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(); } 

 @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700'); @import url("https://fonts.googleapis.com/css?family=Metal+Mania"); @font-face { font-family: "Booter - Zero Zero"; src: url("Fonts/Booter - Zero Zero.woff") format("woff"), url("Fonts/Booter - Zero Zero.woff2") format("woff2"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: Raleway; color: #777; } body{ background-color: #fffbed; } nav{ margin-bottom: 20px; } main{ text-align: center; } ul, li { text-decoration: none; list-style: none; } #logo { background: url(img/LOGO.png); width: 115px; height: 25px; font-size: 0; position: fixed; top: 24px; left: 20px; z-index: 1100; } .borrar:hover { background-color: #f8051b; opacity: 0.8; transition: 0.5s; } .enviar:hover { background-color: #009AAC; opacity: 0.8; transition: 0.5s; } .boton1{ background-color: #eb7681; } .boton2{ background-color: #78e5c3; } footer{ background-color: #f0ffff; background-size: cover; } .btn-primary { color: white; background-color: #f25656; border: none; border-radius: .3em; font-weight: bold; } .btn-primary:hover { background-color: #5f4141; } 

 <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Final Diseño y Programación Web</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="estilos.css"> <script src="java.js"></script> </head> <body> <header class="container fixed-top "> <h1 id="logo">Las Pepas</h1> <div class="row"> <nav class="col navbar fixed-top navbar-expand-md navbar-light bg-light "> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#barra" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="barra"> <ul class="navbar-nav text-center mx-auto px-1"> <li class="nav-item"> <a class="nav-link" href="#uno" data-ancla="true" data-tiempo="800" data-freno="60">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#dos" data-ancla="true" data-tiempo="800" data-freno="60">Productos</a> </li> <li class="nav-item"> <a class="nav-link" href="#tres" data-ancla="true" data-tiempo="800" data-freno="60">Contacto</a> </li> </ul> </div> </nav> </div> </header> <section id="dos"> <div class="container"> <div class="row"> <main id="items" class="col-sm-12 row pt-5 "></main> <aside class=" pl-5 pt-5"> <h2>Carrito</h2> <ul id="carrito" class="list-group"></ul> <hr> <p class="text-right">Total: <span id="total"></span>&dollar;</p> </aside> </div> </div> </section> <section id="tres" class="container"> <div class="row"> <div class="col-md-6 pb-3 my-auto mx-auto"> <h2 class="text-center">Seguinos en nuestras redes</h2> <div class="row pl-2 d-flex justify-content-center align-items-center mr-5"> <div class="col-2 pr-2"> <ul> <li> <a href="https://es-la.facebook.com/" target="_blank"> <img src="img/fb.png" alt="Facebook"> </a> </li> </ul> </div> <div class="col-2 pr-2"> <ul> <li> <a href="https://twitter.com/?lang=es/" target="_blank"> <img src="img/tw.png" alt="Twitter"> </a> </li> </ul> </div> <div class="col-2 pr-2"> <ul> <li> <a href="https://www.instagram.com/?hl=es-la" target="_blank"> <img src="img/ig.png" alt="Instagram"> </a> </li> </ul> </div> </div> </div> <div class=" col-md-6 col-11 text-md-left text-center ml-md-0 ml-4"> <aside class="col-lg-10"> <h3 class="text-center mt-5">¡Contactanos!</h3> <form action="enviar_formulario.php" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="nombre">Nombre</label> <input type="text" class="form-control bordes" id="nombre" placeholder="Nombre..." name="nombre"> </div> <div class="form-group"> <label for="mail">Email</label> <input type="email" class="form-control bordes" id="mail" placeholder="email..." name="mail"> </div> <div class="form-group"> <label for="comentario">Consulta</label> <textarea id="comentario" class="form-control bordes" cols="30" rows="5" name="comentario"></textarea> </div> <input type="reset" value="Borrar" class="btn boton1 borrar my-5"> <input type="submit" value="Enviar" class="btn boton2 enviar my-5"> </form> </aside> </div> </div> </section> <footer class="opacity p-3 text-center" > <p class="bold"> Diseño y Programación web - DMM3A - 2019</p> </footer> <script src="js/jquery-3.3.1.js"></script> <script src="js/bootstrap.bundle.js"></script> <script src="js/animaScroll.js"></script> <script src="js/marcaBoton.js"></script> <script src="js/header02.js"></script> <script> $('.nav-item').on('click', function() { $(".navbar-collapse").collapse("hide"); }) </script> </body> </html> 

Answer 1

嘗試在添加商品之前檢查商品是否已經在購物車中。

在此行carrito.push（this.getAttribute（'marcador'））之前，通過ID檢查商品是否在carrito數組中，如果是，則遵循您的邏輯，如果不是，請執行以下操作-添加功能以將商品價格提高到該商品已有的價格（不要重復一遍，因為有可能第三次或第四次添加相同的項目）。