我正在构建一个购物车系统，添加了项目显示，我想要 group/addition 中的相同项目

Question

这是我的代码

请看。每次将产品添加到购物车时显示单个项目，我只想显示一次项目及其总成本。
请指导...

   <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Shoping cart </h2>
  <div class="row">
<div class="col-md-3">
    <div class="form-group">
      <img name="HP" id="imhp" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imhp');" style="cursor:pointer;">
    </div>
    <div class="form-group">
<p>product small descriptioon</p>
    </div>
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(1);">Add To cart</button>

</div>
<div class="col-md-3">
    <div class="form-group">
      <img name="Dell" id="imdell" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imdell');" style="cursor:pointer;">
    </div>
    <div class="form-group">
<p>product small descriptioon</p>
    </div>
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(2);">Add To cart</button>

</div>
<div class="col-md-3">
    <div class="form-group">
      <img name="sony" id="imsony" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imsony');" style="cursor:pointer;">
    </div>
    <div class="form-group">
<p>product small descriptioon</p>
    </div>
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(3);">Add To cart</button>

</div>
  </div>
</div>
<div class="container">
<div class="jumbotron">
<table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Qty</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody id="cartt">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="3">Sum: 180</td>

      </tr>
      <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="clr();">Cancel</button>
    </tbody>
  </table>
</div>
</div>
</div>

</body>
<script>
var qty =0;
var amount =0;
var naam='';
//var desc=$('#imhp').attr('name');
function addtoCart(id){
{
if(id=='imhp'){
amount = amount+10;
naam='HP';
}
else if(id=='imdell'){
amount = amount+20;
naam='Dell';
}
else if(id=='imsony'){
amount = amount+30;
naam='Sony';
}

}

qty=qty+1;



var ele= $("#cartt");
ele.append('<tr><td>'+naam+'</td><td>'+qty+'</td><td>'+amount+'</td></tr>');
naam='';
qty=0;
amount=0;
}


//clear function on Cancel button
function clr()
{
 qty =0;
 amount =0;
 //following line will give a blank HTML on cart DIV
$("#cartt").html('');
}
</script>
</html>

这里也可以看到编译后的结果。附加屏幕截图请看一下并进一步指导我如何实现我的目标。

Answer 1

您没有将现有的购物车商品与您的方法中的新商品进行比较 addtoCart

使用购物车中已有的 ID 数组，比较新的 ID，如果它已经在数组中，则跳过添加。

代码应该如下所示：

<script>
var qty =0;
var amount =0;
var naam='';
var items = [];

//var desc=$('#imhp').attr('name');
function addtoCart(id){
{
if(items.length != 0)
{
 var count;
 for(count = 0; count < items.length; count++)
{
if (items[count] == id)
{
// alert some error
alert('already in cart');
// skip below execution
return;
}
}
items.push(id);
if(id=='imhp'){
amount = amount+10;
naam='HP';
}
else if(id=='imdell'){
amount = amount+20;
naam='Dell';
}
else if(id=='imsony'){
amount = amount+30;
naam='Sony';
}

}

qty=qty+1;



var ele= $("#cartt");
ele.append('<tr><td>'+naam+'</td><td>'+qty+'</td><td>'+amount+'</td></tr>');
naam='';
qty=0;
amount=0;
}


//clear function on Cancel button
function clr()
{
 qty =0;
 amount =0;
 //following line will give a blank HTML on cart DIV
$("#cartt").html('');
items.pop();
}
</script>

我这边还没有测试过，但希望能有所帮助。

Answer 2

给你，我建议你动态地做这个场景静态的有利于学习

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Shoping cart </h2>
  <div class="row">
<div class="col-md-3">
    <div class="form-group">
      <img name="HP" id="imhp" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imhp');" style="cursor:pointer;">
    </div>
    <div class="form-group">
<p>product small descriptioon</p>
    </div>
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(1);">Add To cart</button>
    
</div>
<div class="col-md-3">
    <div class="form-group">
      <img name="Dell" id="imdell" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imdell');" style="cursor:pointer;">
    </div>
    <div class="form-group">
<p>product small descriptioon</p>
    </div>
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(2);">Add To cart</button>
    
</div>
<div class="col-md-3">
    <div class="form-group">
      <img name="sony" id="imsony" class="img-thumbnail" src="http://placehold.it/150x150" onclick="addtoCart('imsony');" style="cursor:pointer;">
    </div>
    <div class="form-group">
<p>product small descriptioon</p>
    </div>
    <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="addtoCart(3);">Add To cart</button>
    
</div>
  </div>
</div>
<div class="container">
<div class="jumbotron">
<table class="table" id="tbl">
    <thead>
      <tr>
        <th>Name</th>
        <th>Qty</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody id="cartt">
      <tr>
        <td></td>
        <td></td>
        <td></td>
  
      </tr>
   <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="clr();">Cancel</button>
    </tbody>
  
  </table>
  <h3>Sum:</h3> <h2 id = "gttlsum">0</h2>
</div>
</div>
</div>

</body>



<script>
var gttl=0;
var qty =0;
var amount =0;
var naam='';
var recentAdded = '';
//var desc=$('#imhp').attr('name');
function addtoCart(id){
{
if(id=='imhp'){
amount = amount+10;
naam='HP';
}
else if(id=='imdell'){
amount = amount+20;
naam='Dell';
}
else if(id=='imsony'){
amount = amount+30;
naam='Sony';
}

}

qty=qty+1;

var ele= $("#cartt");
gttl = parseInt($("#gttlsum").html());
var isContains = $('#tbl').text().indexOf(naam) > -1;
if(!isContains)
{
ele.append('<tr id="'+naam+'"><td>'+naam+'</td><td id="qty'+naam+'">'+qty+'</td><td id="amount'+naam+'">'+amount+'</td></tr>');
gttl = gttl +amount;
}
else
{
var tqid = '#qty'+naam;
var taid = '#amount'+naam;
var q = $(tqid).html();
var a = $(taid).html();
gttl = gttl +amount;
amount = amount + parseInt(a);
qty = qty + parseInt(q);
var tid = '#'+naam;
var ele= $(tid);
if(ele.html()!='')
{
ele.html('');
ele.append('<td>'+naam+'</td><td id="qty'+naam+'">'+qty+'</td><td id="amount'+naam+'">'+amount+'</td>');
}
else
{
ele.append('<tr id="'+naam+'"><td>'+naam+'</td><td id="qty'+naam+'">'+qty+'</td><td id="amount'+naam+'">'+amount+'</td></tr>');
}
}
$("#gttlsum").html(gttl);
<!-- $('h1').text('NEW...');  -->
naam='';
qty=0;
amount=0;
}


//clear function on Cancel button
function clr()
{
 qty =0;
 amount =0;
 //following line will give a blank HTML on cart DIV
$("#cartt").html('');
$("#gttlsum").html(0);
}
</script>





</html>

我正在构建一个购物车系统，添加了项目显示，我想要 group/addition 中的相同项目

I am building a Cart system, Added items displaying , i want same items in a group/addition

jquery

cart