我正在建立一個購物車系統，添加項目顯示，我想同組的項目/另外

-1

請看看。每次將產品添加到購物車時，它都會顯示一個項目，我只想顯示一個項目，並顯示其總成本。
請指導...

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

在這裏還可以看到編譯後的結果。附加屏幕截圖請看看並指導我進一步如何實現我的目標。

來源

2016-09-19 Mohiyo Deen

使用變量名裏面做有意義... –

在這裏你去我建議你做這個場景動態靜態還是不錯的學習

<!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> 
 
\t \t 
 
     </tr> 
 
\t <button type="submit" class="btn btn-default" style="margin: 0 0 15px;" onclick="clr();">Cancel</button> 
 
    </tbody> 
 
\t \t 
 
    </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>

來源

2016-09-21 05:54:56 Ralis

我遵循你的指導和代碼，它工作正常。感謝 –

感謝您，然後接受標記解決方案作爲答案... :) –

你是不是比較你的方法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>

在我身邊沒有測試過，但希望幫助。

來源

2016-09-19 11:06:08

阿薩德是正確的，你應該把一個檢查 – Ralis

我正在建立一個購物車系統，添加項目顯示，我想同組的項目/另外

回答

相關問題