Can';在我的json和javascript文件中找不到错误
我正在制作一个食品订购系统。现在,我必须制作一个购物车页面,以便在我单击该页面时立即将项目添加到该页面。我制作了一个包含所有项目的json文件和一个运行该页面的js文件。我没有收到任何错误,但不会输出 以下是我的json代码:Can';在我的json和javascript文件中找不到错误,javascript,html,jquery,json,Javascript,Html,Jquery,Json,我正在制作一个食品订购系统。现在,我必须制作一个购物车页面,以便在我单击该页面时立即将项目添加到该页面。我制作了一个包含所有项目的json文件和一个运行该页面的js文件。我没有收到任何错误,但不会输出 以下是我的json代码: [ { "id": 0, "name": "Lasagna", "picture": "images/lasagna.jpg", &qu
[
{
"id": 0,
"name": "Lasagna",
"picture": "images/lasagna.jpg",
"price": 500
},
{
"id": 1,
"name": "Mexican Pizza",
"picture": "images/mpizza.jpg",
"price": 310
},
{
"id": 2,
"name": "Tiramisu Shake",
"picture": "images/tiramisu.jpg",
"price": 290
},
{
"id": 3,
"name": "Penne Pasta",
"picture": "images/ppizza.jpg",
"price": 280
},
{
"id": 4,
"name": "Classic Maggi",
"picture": "images/maggi.jpg",
"price": 120
},
{
"id": 5,
"name": "Nachos",
"picture": "images/nachos.jpg",
"price": 250
},
{
"id": 6,
"name": "Margarita Pizza",
"picture": "images/margarita.jpg",
"price": 220
},
{
"id": 7,
"name": "Kitkat Shake",
"picture": "images/kitkat.jpg",
"price": 310
},
]
这是我的js代码:
$.getJSON('food.json', function(data) {
var foodRow = $('#foodRow');
var foodTemplate = $('#foodTemplate');
for (i = 0; i < data.length; i ++) {
foodTemplate.find('.panel-title').text(data[i].name);
foodTemplate.find('img').attr('src', data[i].picture);
foodTemplate.find('.price').text(data[i].price);
foodTemplate.find('.btn-success').attr('data-id', data[i].id);
console.log(data[i].id)
foodRow.append(foodTemplate.html());
}
});
$("button").click(function(){
var i = $(this).attr("data-id");
console.log(i);
('$out').text(i)
});
$.getJSON('food.json',函数(数据){
var foodRow=$(“#foodRow”);
var foodTemplate=$(“#foodTemplate”);
对于(i=0;i
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Foodzie</title>
<script src="jquery-3.5.1.min.js"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/887e6e97bd.js" crossorigin="anonymous"></script>
<!-- CSS STYLESHEET -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="food.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<div class="fluid-container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">FoodZie</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">View Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add Items</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<div class="fluid-container">
<div id="foodRow" class="row">
<!-- PETS LOAD HERE -->
</div>
<div id="foodTemplate" style="display: none;">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="panel panel-default panel-pet">
<div class="panel-heading">
<br>
<h3 class="panel-title">Pizza</h3>
</div>
<div class="panel-body">
<img alt="140x140" data-src="holder.js/140x140" class="img-rounded img-center" style="width: 100%;" src="images/mpizza.jpg" data-holder-rendered="true" height="140" width="140">
<br/><br/>
<strong>Cost</strong>: <span class="price">250</span><br/><br/>
<button class="btn btn-success" type="button" data-id="0" id = "cart">Add to Cart</button><br>
<p id=out></p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
福兹
-
-
披萨
成本:250
添加到购物车
您当前的代码中几乎没有问题。您的JSON
文件中有额外的,
,该文件是静默的会抛出错误,但不会显示在控制台中
其次,您没有正确显示添加到购物车按钮的数据id
,您的语法不正确
$('#out').text(i)
此外,在加载DOM
后,您将动态添加产品,因此在本例中,您需要使用事件委派
将事件附加到添加到购物车
按钮
$(document).on('click', '.cart', function(){
var i = $(this).data("id"); //get the data-id of the clicked button
console.log(i);
$('#out').text(i)
});
请注意,我还在您的添加到购物车添加到购物车
按钮中使用类
选择器-id对于每个按钮都必须是唯一的,以避免出现问题
完整的工作代码:
//食品JSON文件
风险值数据=[
{
“id”:0,
“名称”:“千层面”,
“图片”:“images/lasagna.jpg”,
“价格”:500
},
{
“id”:1,
“名称”:“墨西哥比萨饼”,
“图片”:“images/mpizza.jpg”,
“价格”:310
},
{
“id”:2,
“名称”:“提拉米苏奶昔”,
“图片”:“images/tiramisu.jpg”,
“价格”:290
},
{
“id”:3,
“名称”:“潘恩意大利面”,
“图片”:“images/ppizza.jpg”,
“价格”:280
},
{
“id”:4,
“名称”:“经典Maggi”,
“图片”:“images/maggi.jpg”,
“价格”:120
},
{
“id”:5,
“名称”:“玉米片”,
“图片”:“images/nachos.jpg”,
“价格”:250
},
{
“id”:6,
“名称”:“玛格丽塔披萨”,
“图片”:“images/margarita.jpg”,
“价格”:220
},
{
“id”:7,
“名称”:“Kitkat Shake”,
“图片”:“images/kitkat.jpg”,
“价格”:310
}
]
//$.getJSON('food.json',函数(数据){//在代码中对此进行注释
var foodRow=$(“#foodRow”);
var foodTemplate=$(“#foodTemplate”);
对于(i=0;i
福兹
-
-
披萨
成本:250
添加到购物车
还可以添加html代码,以进一步了解什么是(“$out”)。文本(i)
?它不应该是$(“$out”).text(i)
?这控制台.log(data[i].id)
是否会在浏览器控制台中打印?您的问题不清楚,您希望“在我单击它时立即将其添加到哪里?”?是否要将其添加到当前的food.json?或者只是在容器中显示?“输出不来”你的意思是数据没有成功地存储在json中吗?添加了我的html代码