giwuf
18.09.2018, 20:23
Есть интерфес опросника, который работает без перезагрузки страницы и данные которые берутся из json файла.
Вариант с одним вопросом реализован, сложности начинаются, когда вопросов много в цепочке один за другим.
Как сделать так, чтобы считывать данные из json файла в массив и последовательно отдавать после нажатия на кнопку ответить очередного вопроса?
Собираю массив через
data.forEach(function(item) {});, но если внутрь поместить функцию answers, то абсолютно все ответы ждя разных вопросов просто отобразятся на одной страницы.
Как можно реализовать задуманное?
Фидл здесь - http://jsfiddle.net/qxrognd6/
$(function() {
var vote = {};
$('#ok').click(function() {
$.get(poll.json, function(data) {
// фактически данные poll.json хранятся в таком виде
//data = [{"id":"1", "question":"Какую марку предпочитаете?", "answers":["honda", "bmw", "volvo"]}, {"id":"2", "question":"Цвет авто?", "answers":["black", "red", "blue"]}
data.forEach(function(item) {
vote.id = item.id;
vote.question = item.question;
vote.answers = item.answers;
});
answers();
});
appearance('#start', '#content');
return false;
});
var appearance = function(slide, content) {
$(slide).hide('fast', showNewContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
function showNewContent() {
$(content).show('normal', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
};
var answers = function() {
for (var i = 0; i <= vote['answers'].length - 1; i++) {
var form = $('#vote');
var answers = form.find('.answers');
form.parent().find('.question').text(vote['question']);
answers.append('<div class="radio">' +
'<label>' +
'<input type="radio" name="poll" value="' + (i + 1) + '">' +
vote['answers'][i] +
'</label>' +
'</div>');
}
};
});
<div id="start">
<a id='ok' href=''>Поехали</a>
</div>
<div id="content">
<h4 class="question">Вопрос</h4>
<form id="vote" action="vote.php" method="POST">
<div class="answers"></div>
<button type="submit" class="btn btn-default">ответить</button>
</form>
</div>
#content {
display: none;
}
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
width: 43px;
height: 11px;
text-indent: -9999em;
}
Вариант с одним вопросом реализован, сложности начинаются, когда вопросов много в цепочке один за другим.
Как сделать так, чтобы считывать данные из json файла в массив и последовательно отдавать после нажатия на кнопку ответить очередного вопроса?
Собираю массив через
data.forEach(function(item) {});, но если внутрь поместить функцию answers, то абсолютно все ответы ждя разных вопросов просто отобразятся на одной страницы.
Как можно реализовать задуманное?
Фидл здесь - http://jsfiddle.net/qxrognd6/
$(function() {
var vote = {};
$('#ok').click(function() {
$.get(poll.json, function(data) {
// фактически данные poll.json хранятся в таком виде
//data = [{"id":"1", "question":"Какую марку предпочитаете?", "answers":["honda", "bmw", "volvo"]}, {"id":"2", "question":"Цвет авто?", "answers":["black", "red", "blue"]}
data.forEach(function(item) {
vote.id = item.id;
vote.question = item.question;
vote.answers = item.answers;
});
answers();
});
appearance('#start', '#content');
return false;
});
var appearance = function(slide, content) {
$(slide).hide('fast', showNewContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
function showNewContent() {
$(content).show('normal', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
};
var answers = function() {
for (var i = 0; i <= vote['answers'].length - 1; i++) {
var form = $('#vote');
var answers = form.find('.answers');
form.parent().find('.question').text(vote['question']);
answers.append('<div class="radio">' +
'<label>' +
'<input type="radio" name="poll" value="' + (i + 1) + '">' +
vote['answers'][i] +
'</label>' +
'</div>');
}
};
});
<div id="start">
<a id='ok' href=''>Поехали</a>
</div>
<div id="content">
<h4 class="question">Вопрос</h4>
<form id="vote" action="vote.php" method="POST">
<div class="answers"></div>
<button type="submit" class="btn btn-default">ответить</button>
</form>
</div>
#content {
display: none;
}
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
width: 43px;
height: 11px;
text-indent: -9999em;
}