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

问题

Here is My Code

Please have a look. It is displaying a single Item every time when a product is added to Cart, all I wants is to display single item once, and its total cost.
Please guide...

   <!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>

Here you can also see the results after compiling. Attached Screen Shot Please have a look and guide me further how to achieve my target.

回答1:

Here you go i suggests you to do this scenario dynamically static is good for learning

<!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>

回答2:

you are not comparing the existing cart items with the new coming item in you method addtoCart

use and array of id's which are already in cart and compare new id if it is already in the array then skip adding.

code should be like following:

<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>

haven't tested at my side but hope that helps.

来源：https://stackoverflow.com/questions/39571190/i-am-building-a-cart-system-added-items-displaying-i-want-same-items-in-a-gro

标签

jquery

cart