Question

我正在制作购物车。

这是用户点击dd to cart按钮将项目添加到购物车表的代码：

    <div class="container">
<a class="addToCart" href="#" data-name="Java" data-price="150"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
    <div class="center">Java Basics</div>
    <p> 150 SAR </p>
            <div>
                <label for="qty-1">Quantity</label>
                <input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
            </div>
            <p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>

<div class="container1">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
    <div class="center">PHP Basics</div>
    <p> 100 SAR </p>
            <div>
                <label for="qty-1">Quantity</label>
                <input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
            </div>
            <p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>

<div class="container2">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
    <div class="center">JavaScript Basics</div>
    <p> 200 SAR </p>
            <div>
                <label for="qty-1">Quantity</label>
                <input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
            </div>
            <p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>

使用这个jQuery脚本：我有javascript文件，包含购物车的功能，如添加到购物车，从车上删除和计算总数。

    <script src="js/functions.js"></script>
<script>

// some jQuery function added to the links

$("#totalCart").html();

$(".addToCart")click(function(event){
eventpreventDefault(); //prevent the links from doing the default behaviour when they are clicked 
var name= $(this).att("data-name"); //this represents the link that you click on / attr to access one of the attributes
var price= Number($(this).att("data-price"));

addItemtoCart(name, price, 1); 
displayCart();
});

function displayCart() {  //display cart content into the page as a list 
var cartArray = listCart();
var output = "" ; 
for ( var i in cartArray) { 
output += "<li>" +cartArray[i].name+"  "+cartArray[i].quantity+"</li>"
}
$("#showCart").html(output);  //html(output) to replace everything in showCart with text we want
$("#totalCart").html(total Cart());
}

这就是cart.html

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form id="shopping-cart" action="cart.html" method="post">

<table style="width:80%">
  <tr>
    <th> Item </th>
    <th> Quantity </th> 
    <th> Price </th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

</body>
</html>

我的问题是，我想将添加到购物车按钮链接到cart.html页面并实现这些功能，我不知道如何将它们粘合在一起。仅使用HtML，JavaScript和一点点jQuery。

PS：没有使用数据库。

将产品添加到不同页面的购物车表中

0 个答案: