我目前正在使用HTML,CSS和jQuery进行小型互动 - 没什么特别的。
我有一个成功从json文件中获取问题数据的函数,但是当单击next或previous时,按钮函数似乎没有触发并从数组中获取下一个问题数据。
对此的任何和所有帮助都将不胜感激。
谢谢。
HTML
<div class="two">
<h2>Question 1</h2>
<h3></h3>
<ul class="anwsers">
</ul>
<ul class="controls">
<li class="back">
<button>Back</button>
</li>
<li class="next">
<button>Next</button>
</li>
</ul>
</div>
JS
function questions(){
var data = [];
var index = 1;
function question() {
$(".two h3").html(data[index].question);
}
$.ajax({
url: '../json/data.json',
type: 'get',
dataType: 'json',
success: function(json) {
data = json;
question();
}
});
$('.two li.next button').on('click', function(index){
console.log(index);
if (index < data.length - 1) {
index += 1;
question();
}
});
$('.two li.back button').on('click', function(index){
console.log('Prev');
if (index > 0) {
index -= 1;
question();
}
});
}
JSON
{
"1": {
"question": "Which one of the five is least like the other four?",
"values": ["Snake", "Rat", "Lion", "Pig", "Cow", "Goat"],
"answer": "Snake"
},
"2": {
"question": "Which number should come next in the series?<br/>1 - 1 - 2 - 3 - 5 - 8 - 13",
"values": ["8", "13", "21", "26", "31"],
"answer": "21"
},
"3": {
"question": "Which one of the five choices makes the best comparison?<br/>PEACH is to HCAEP as 46251 is to",
"values": ["25641", "26451", "12654", "51462", "15264"],
"answer": "15264"
}
}
答案 0 :(得分:0)
从var data = [];
函数中声明questions()
。让它全球化
答案 1 :(得分:0)
像这样改写:
var data = []; var index = 0;
function question() {
if(data[index] != undefined)
{
$(".two h3").html(data[index].question);
}
}
function questions() {
$.ajax({
url: '../json/data.json',
type: 'get',
dataType: 'json',
success: function(json) {
data = json;
question();
}
});
}
$('.two li.next button').on('click', function() {
console.log(index);
if (index < data.length - 1) {
index += 1;
// enabling the buttons would be useful here
question();
} else {
alert("No more questions");
}
});
$('.two li.back button').on('click', function() {
console.log('Prev');
if (index > 0) {
index -= 1;
question();
} else {
alert("This is the first one.");
}
});
答案 2 :(得分:0)
从click even函数中删除index参数,因为click事件处理程序中的1st参数包含偶数数据。
因为&#34;索引&#34;在这个功能下是直接可行的:
$('.two li.next button').on('click', function(){
console.log(index);
});
$('.two li.back button').on('click', function(){
console.log(index);
});
答案 3 :(得分:0)
尝试以下代码
$.ajax({
url: '../json/data.json',
type: 'get',
dataType: 'json',
success: function(json) {
data = json;
$.each(data,function(i,v){
var answ = '';
$.each(v.values,function(x,t){ answ +='<li>'+t+'</li>'; });
$('body').append('
<div class="two" style="display:none;"><h2>Question '+i+'</h2><h3 style="display:none;">'+v.question+'</h3><ul class="anwsers">'+answ+'</ul>
<ul class="controls">
<li class="back">
<button>Back</button>
</li>
<li class="next">
<button>Next</button>
</li>
</ul>
</div>');
});
$('.two:first').show();
}
});
$('body').on('click','.two li.next button', function(index){
$(this).closest('.two').hide();
if($(this).closest('.two').is('.two:last')) {
$('.two:first').show();
} else {
$(this).closest('.two').next().show();
}
});
$('body').on('click','.two li.back button', function(index){
$(this).closest('.two').hide();
if($(this).closest('.two').is('.two:first')) {
$('.two:last').show();
} else {
$(this).closest('.two').prev().show();
}
});
答案 4 :(得分:-1)
struct Polygon a
您可以将功能(索引)更改为正常的功能(事件)