我该如何实现这个JSON文件？
我有以下代码，我似乎无法将数据显示在主板上。 json文件是在本地添加的，而不是从URL添加的。
$feed->set_feed_url(array('http://www.example.com/feed'=>'Example Feed',
'http://exampletwo.com/rss'=>'Example Two Feed')
到目前为止，我有这个，我不知道如何继续。
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<h2>Jeopardy!</h2>
<div class="panel panel-default">
<div class="panel-heading">
<div class="text-center col-md-2 col-md-offset-1"><h4><strong>Category</strong></h4></div>
<div class="text-center col-md-2"><h4><strong>Category</strong></h4></div>
<div class="text-center col-md-2"><h4><strong>Category</strong></h4></div>
<div class="text-center col-md-2"><h4><strong>Category</strong></h4></div>
<div class="text-center col-md-2"><h4><strong>Category</strong></h4></div>
<div class="clearfix"></div>
</div>
<div class="panel-body" id="main-board">
<div class="category col-md-2 col-md-offset-1">
<div class="well question" data-toggle="modal" data-target="#myModal">100</div>
<div class="well question" data-toggle="modal" data-target="#myModal">200</div>
<div class="well question" data-toggle="modal" data-target="#myModal">300</div>
<div class="well question" data-toggle="modal" data-target="#myModal">400</div>
<div class="well question" data-toggle="modal" data-target="#myModal">500</div>
</div>
<div class="category col-md-2">
<div class="well question" data-toggle="modal" data-target="#myModal">100</div>
<div class="well question" data-toggle="modal" data-target="#myModal">200</div>
<div class="well question" data-toggle="modal" data-target="#myModal">300</div>
<div class="well question" data-toggle="modal" data-target="#myModal">400</div>
<div class="well question" data-toggle="modal" data-target="#myModal">500</div>
</div>
<div class="category col-md-2">
<div class="well question" data-toggle="modal" data-target="#myModal">100</div>
<div class="well question" data-toggle="modal" data-target="#myModal">200</div>
<div class="well question" data-toggle="modal" data-target="#myModal">300</div>
<div class="well question" data-toggle="modal" data-target="#myModal">400</div>
<div class="well question" data-toggle="modal" data-target="#myModal">500</div>
</div>
<div class="category col-md-2">
<div class="well question" data-toggle="modal" data-target="#myModal">100</div>
<div class="well question" data-toggle="modal" data-target="#myModal">200</div>
<div class="well question" data-toggle="modal" data-target="#myModal">300</div>
<div class="well question" data-toggle="modal" data-target="#myModal">400</div>
<div class="well question" data-toggle="modal" data-target="#myModal">500</div>
</div>
<div class="category col-md-2">
<div class="well question" data-toggle="modal" data-target="#myModal">100</div>
<div class="well question" data-toggle="modal" data-target="#myModal">200</div>
<div class="well question" data-toggle="modal" data-target="#myModal">300</div>
<div class="well question" data-toggle="modal" data-target="#myModal">400</div>
<div class="well question" data-toggle="modal" data-target="#myModal">500</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<br/>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"></div>
</div>
</div>
</body>
在另一个board.json文件中：
$(function () {
$('.question').click(function(){
$('.modal-title').text('Category');
$('.modal-body').text('Question');
});
});
我尝试过使用.ajax，但我无法显示数据。有人可以帮助引导我朝着正确的方向前进吗？
1 个答案:
答案 0 :(得分：1)
- 首先，你在board.json中定义了一个变量'board'，你需要将它重命名为board.js，因为它是一个JavaScript JSON对象。
- 其次，您必须在您的HTML头中包含board.js，以便脚本可以知道该文件。
- 第三，您必须删除手动添加的类别和问题，并根据提供的board.js动态构建它们.js
下面是一个工作示例：
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/board.js" type="text/javascript"></script>
<link rel="stylesheet" href="bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h2>Jeopardy!</h2>
<div class="panel panel-default">
<div id="headingPanel" class="panel-heading">
<!-- removed the manual categories to be added Dynamicly from the given JSON Object -->
</div>
<div class="panel-body" id="main-board">
<!-- removed the manual questions to be added Dynamicly from the given JSON Object -->
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<br/>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"></div>
</div>
</div>
</body>
并且脚本文件将是这样的：
$(function () {
//first build the heading category titles
board.forEach(function (currentCat) {
$("#headingPanel").append('<div class="text-center col-md-2 col-md-offset-1"><h4><strong>' + currentCat.name + '</strong></h4></div>');
});
$("#headingPanel").append('<div class="clearfix"></div>');
//second we build the questions
board.forEach(function (currentCat) {
//let's get all the questions for the current Category :
var allQuestions = $('<div class="category col-md-2 col-md-offset-1">'); //create the category panel for questions
currentCat.questions.forEach(function (currentQuest) {
var question = $(
'<div class="well question" data-toggle="modal" data-target="#myModal" questionCategory="' + currentCat.name + '" questionData="' + currentQuest.question + '">' + currentQuest.value + '</div>');
allQuestions.append(question); //append each single question to the questions panel
});
$("#main-board").append(allQuestions); //append the category panel for questions to the main board
});
//move this function to the end of the build, so the click trigger can be applied ..
$('.question').click(function (event) { //pass the event param, in order to get the specific question data to be displayed
$('.modal-title').text(event.target.attributes.questionCategory.value); // set the clicked question Category to the model display
$('.modal-body').text(event.target.attributes.questionData.value); // set the clicked question data to the model display
});
}）;
这是一个board.js样本：
var board =
[
{
"name":"category1",
"questions":[
{
"value":100,
"question":"Question 1 in category 1 for 100 points",
"answers":[
{
"text":"A",
"correct":true
},
{
"text":"B",
"correct":false
},
{
"text":"C",
"correct":false
},
{
"text":"D",
"correct":false
}
]
},
{
"value":200,
"question":"Question 2 in category 1 for 200 points",
"answers":[
{
"text":"A",
"correct":true
},
{
"text":"B",
"correct":false
},
{
"text":"C",
"correct":false
},
{
"text":"D",
"correct":false
}
]
}
]
},
{
"name":"category2",
"questions":[
{
"value":100,
"question":"Question 1 in category 2 for 100 points",
"answers":[
{
"text":"A",
"correct":true
},
{
"text":"B",
"correct":false
},
{
"text":"C",
"correct":false
},
{
"text":"D",
"correct":false
}
]
},
{
"value":200,
"question":"Question 2 in category 2 for 200 points",
"answers":[
{
"text":"A",
"correct":true
},
{
"text":"B",
"correct":false
},
{
"text":"C",
"correct":false
},
{
"text":"D",
"correct":false
}
]
}
]
}
];
这是工作示例的屏幕截图：
希望这有助于：）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？