在上一页显示产品详细信息

时间:2019-05-18 20:37:46

标签: javascript jquery

我正在从JSON文件中获取数据,然后单击产品名称,在页面的另一部分显示了该产品的详细信息,其中包括产品图像,描述和成本。在产品的显示屏中,有一个“关闭”按钮或链接,单击该按钮或链接可将其从显示屏中删除。

请参见下面的代码,它们工作正常,但我不知道如何编写代码以在另一页上显示产品结果。

Index.html

<div id="content">
    <form action="product.html" method="GET">

        <button class="btn btn-success" type="button">Cart List</button>
        <table id="productTable" class="table table-borderless">
        <tr>
            <th scope="col">Product Name</th>
            <th scope="col">Price</th>
            <th>Product Cart</th>
          </tr>


          <!-- <tr>
            <td scope="row"><a></a></td>
            <td></td>
            <td><button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button></td>
            </tr> -->

      </table>
    </form>
</div>

script.js

$(document).ready(function(){

   $.getJSON("product.json", function(data){

      var myProduct ='';
     $.each(data.products,function(key,value){
         console.log(key);


         myProduct += '<tr>';
         myProduct += '<td>'+'<a href="product.html" onClick()="getProduct()">' + value.name+'</a>'+'</td>';
         myProduct += '<td>' +'$'+ value.unit_cost+'</td>';
         myProduct += '<td>' +'<button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button>' +'</td>';
         myProduct += '</tr>';

      });

      $('#productTable').append(myProduct);

   });
});

Prodouts.json

{
  "products": [
    {
      "id": 0,
      "name": "Ocean Blue Shirt",
      "description": "Ocean blue cotton shirt with a narrow collar and buttons down the front and long sleeves. Comfortable fit and tiled kalidoscope patterns. ",
      "category": "men",
      "image_url": "https://burst.shopifycdn.com/photos/young-man-in-bright-fashion_925x.jpg",
      "unit_cost": 111.53,
      "inventory": 5
    },
    {
      "id": 1,
      "name": "Classic Varsity Top",
      "description": "Womens casual varsity top, This grey and black buttoned top is a sport-inspired piece complete with an embroidered letter. ",
      "category": "women",
      "image_url": "https://burst.shopifycdn.com/photos/casual-fashion-woman_925x.jpg",
      "unit_cost": 13.28,
      "inventory": 10
    }
  ]
}

0 个答案:

没有答案