我正在从JSON文件中获取数据,然后单击产品名称,在页面的另一部分显示了该产品的详细信息,其中包括产品图像,描述和成本。在产品的显示屏中,有一个“关闭”按钮或链接,单击该按钮或链接可将其从显示屏中删除。
请参见下面的代码,它们工作正常,但我不知道如何编写代码以在另一页上显示产品结果。
<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>
$(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);
});
});
{
"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
}
]
}