我正在尝试构建一个测验应用程序。差不多完成了，现在我想向用户展示我的所有问题只显示一个问题，当用户点击下一个按钮然后，下一个问题将出现并且回答问题将隐藏。如果用户没有选择任何两个答案，那么用户不允许点击下一个按钮。在最后，将出现提交按钮，用户将能够提交数据。我搜索了一些来源，并发现几乎与我的预期相似。但是，它完全是javascript，现在我正在尝试重用我的laravel项目。但是在这里我遇到了一些问题，有人会帮助我得到预期的结果 - （如果你有任何简单的过程来获得预期的结果请告诉我） 我的index.blade.php是 -
<div class="question" id="question-div">
<form action="{{ url('en-question-answer') }}" method="POST" id="question-form">
{{ csrf_field() }}
<?php
$count=0;
;?>
@foreach($equestions as $equestionType)
@foreach($equestionType as $key => $equestion)
<p>{{ $equestion->question }}</p>
<input type="hidden" id="question_id[{{$count}}]" name="question_id[{{$count}}]" value="{{ $equestion->id }}">
<label class="radio-inline">
<input type="radio" required name="en_answer[{{$count}}]" value="{{ $equestion->choice_a }}">{{ $equestion->option1 }}
</label>
<label class="radio-inline">
<input type="radio" required name="en_answer[{{$count}}]" value="{{ $equestion->choice_b}}">{{ $equestion->option2 }}
</label>
<hr>
<?php $count++; ?>
@endforeach
@endforeach
<button type="submit" id="submit" class="btn btn-primary btn-sm pull-right">Submit</button>
<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Prev</a></div>
</form>
</div>
脚本是 -
<script>
//scripts for next-prev button
(function() {
var questions = document.getElementById('question_id[{{$count}}]');
//console.log(questions);
var questionCounter = 0; //Tracks question number
var quiz = $('#question-div'); //Quiz div object
// Display initial question
displayNext();
// Click handler for the 'next' button
$('#next').on('click', function (e) {
e.preventDefault();
// Suspend click listener during fade animation
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter++;
displayNext();
});
// Click handler for the 'prev' button
$('#prev').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});
// Click handler for the 'Start Over' button
$('#submit').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
questionCounter = 0;
displayNext();
$('#submit').hide();
});
// Animates buttons on hover
$('.button').on('mouseenter', function () {
$(this).addClass('active');
});
$('.button').on('mouseleave', function () {
$(this).removeClass('active');
});
// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$('question_id[{{$count}}]').remove();
if(questionCounter < questions.length){
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
// Controls display of 'prev' button
if(questionCounter === 1){
$('#prev').show();
} else if(questionCounter === 0){
$('#prev').hide();
$('#next').show();
}
}else {
$('#next').hide();
$('#prev').hide();
$('#submit').show();
}
});
}
})();
</script>
答案 0 :(得分：1)
给你样例代码...... 请仔细阅读....
var maxq = 6;
$('.radio-inline').click(function(e) {
var id = parseInt($(this).data('id'));
if(id==1) $('.button').addClass('hide');
if(id!=(maxq-1)){$('#next').removeClass('hide');}
var next = (id+1);
var prev = (id-1);
$('#next').data('id',next);
$('#prev').data('id',prev);
});
$('#next').click(function(e) {
var id = $(this).data('id');
$('.button').addClass('hide');
//$('#next').removeClass('hide');
if(id==(maxq-1)) {$('#submit,#prev').removeClass('hide');}
else {$('.button').addClass('hide');$('#prev').removeClass('hide');}
$('.question').addClass('hide');
$('#div-'+id).removeClass('hide');
var next = id+1;
var prev = id-1;
$('#next').data('id',next);
$('#prev').data('id',prev);
});
$('#prev').click(function(e) {
var id = $(this).data('id');
$('#prev').removeClass('hide');
if(id==1)$('.button').addClass('hide');
$('.question').addClass('hide');
$('#div-'+id).removeClass('hide');
var next = id+1;
var prev = id-1;
$('#next').data('id',next);
$('#prev').data('id',prev);
});.hide{
display:none;
}<link rel="stylesheet" type="text/css" href="http://www.mercurysolutions.co/app/webroot/css/common/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions" id="question-div">
<form action="" method="POST" id="question-form">
<div align="center" id="div-1" class="question">
<p>Question 1 : <input type="hidden" name="question[]" value="1" id="1" />A</p>
<label class="radio-inline" data-id="1" ><input type="radio" required name="a-1" value="A1">A1</label>
<label class="radio-inline" data-id="1" ><input type="radio" required name="a-1" value="A2">A2</label><hr />
</div>
<div align="center" id="div-2" class="question hide">
<p>Question 2 : <input type="hidden" name="question[]" value="2" id="2" />B</p>
<label class="radio-inline" data-id="2" ><input type="radio" required name="a-2" value="B1">B1</label>
<label class="radio-inline" data-id="2" ><input type="radio" required name="a-2" value="B2">B2</label><hr />
</div>
<div align="center" id="div-3" class="question hide">
<p>Question 3 : <input type="hidden" name="question[]" value="3" id="3" />C</p>
<label class="radio-inline" data-id="3" ><input type="radio" required name="a-3" value="C1">C1</label>
<label class="radio-inline" data-id="3" ><input type="radio" required name="a-3" value="C2">C2</label><hr />
</div>
<div align="center" id="div-4" class="question hide">
<p>Question 4 : <input type="hidden" name="question[]" value="4" id="4" />D</p>
<label class="radio-inline" data-id="4" ><input type="radio" required name="a-4" value="D1">D1</label>
<label class="radio-inline" data-id="4" ><input type="radio" required name="a-4" value="D2">D2</label><hr />
</div>
<div align="center" id="div-5" class="question hide">
<p>Question 5 : <input type="hidden" name="question[]" value="5" id="5" />E</p>
<label class="radio-inline" data-id="5" ><input type="radio" required name="a-5" value="E1">E1</label>
<label class="radio-inline" data-id="5" ><input type="radio" required name="a-5" value="E2">E2</label><hr />
</div>
<div class="button hide" id="next">Next</div>
<div class="button hide" id="prev">Prev</div>
<button type="submit" id="submit" class="btn btn-primary btn-sm pull-right hide">Submit</button>
</form>
</div>
<?php
$qu = array(
array('id'=>'1','q'=>"A",'a'=>"A1",'b'=>"A2"),
array('id'=>'2','q'=>"B",'a'=>"B1",'b'=>"B2"),
array('id'=>'3','q'=>"C",'a'=>"C1",'b'=>"C2"),
array('id'=>'4','q'=>"D",'a'=>"D1",'b'=>"D2"),
array('id'=>'5','q'=>"E",'a'=>"E1",'b'=>"E2")
);$i=1;
echo '
<div class="questions" id="question-div">
<form action="" method="POST" id="question-form">';foreach($qu as $r){echo '
<div align="center" id="div-'.$i.'" class="question'; if($i>1)echo ' hide';echo '">
<p>Question '.$i.' : <input type="hidden" name="question[]" value="'.$r['id'].'" id="'.$r['id'].'" />'.$r['q'].'</p>
<label class="radio-inline" data-id="'.$i.'" ><input type="radio" required name="a-'.$r['id'].'" value="'.$r['a'].'">'.$r['a'].'</label>
<label class="radio-inline" data-id="'.$i.'" ><input type="radio" required name="a-'.$r['id'].'" value="'.$r['b'].'">'.$r['b'].'</label><hr />
</div>';$i++;
}echo '
<div class="button hide" id="next">Next</div>
<div class="button hide" id="prev">Prev</div>
<button type="submit" id="submit" class="btn btn-primary btn-sm pull-right hide">Submit</button>
</form>
</div>';?>