Php Jquery中的进度条工作不正常

Php Jquery中的进度条工作不正常,php,jquery,html,css,Php,Jquery,Html,Css,完全是网络开发新手。每次用户通过进度条选择一个选项时,我都试图在考试表格中向用户显示进度,这样用户就可以知道还有多少问题或占整个考试的百分比。问题是进度条工作不正常。当我选择第一个选项时,进度条已达到100% 如何解决此问题 这是我的密码 </head> <body> <?Php require "config0.php"; $count=$dbo->prepare("select * from questions where question_id=1 "

完全是网络开发新手。每次用户通过进度条选择一个选项时,我都试图在考试表格中向用户显示进度,这样用户就可以知道还有多少问题或占整个考试的百分比。问题是进度条工作不正常。当我选择第一个选项时,进度条已达到100% 如何解决此问题

这是我的密码

</head>
<body>

<?Php
require "config0.php";
$count=$dbo->prepare("select * from questions where question_id=1 ");
if($count->execute()){
$row = $count->fetch(PDO::FETCH_OBJ);

}
$questions_number = $dbo->query("select count(question_number) from questions
left join servey_question on questions.question_id = servey_question.question_id where servey_id = 'serv01' ")->fetchColumn();
echo "
<div id='maindiv' class='maindiv'>
<form id='f1'>
        <table>
        <tr><th>
        <input type='hidden' id=question_id value=$row->question_id>
        </th></tr>
        <tr><th>
        <h4 id='q1'>$row->question</h4>
        </th></tr>

        <tr><td>
              <input type='radio' name='options' id='opt1' value='1' > <label for='opt1' class='lb'>$row->opt1</label>
        </td></tr>
        <tr><td>
              <input type='radio' name='options' id='opt2' value='2' >  <label for='opt2' class='lb'>$row->opt2</label>
        </td></tr>

        <tr><td>
              <input type='radio' name='options' id='opt3' value='3' >  <label for='opt3' class='lb'>$row->opt3</label>

        </td></tr>
        <tr><td>
              <input type='radio' name='options' id='opt4' value='4' >  <label for='opt4' class='lb'>$row->opt4</label>
        </td></tr>
        <tr><td>
              <input type='radio' name='options' id='opt5' value='5' >  <label for='opt5' class='lb'>$row->opt5</label>
        </td></tr>
        <tr><td>
              <input type='radio' name='options' id='opt6' value='6' >  <label for='opt6' class='lb'>$row->opt6</label>
        </td></tr>

        </table>
</form>
</div>
 <div id='progress'>
    <span class='progress-text'></span>
    <div class='progress-bar'></div>
</div>

";
?>
<script>
$(document).ready(function() {


$("input:radio[name=options]").click(function() {

    //for progress bar 
    var total = 53;

for(var i=1;i<=total;i++){
    var percent = (i/total*100);
    $('#progress .progress-text').text(percent + '%');
        $('#progress .progress-bar').css({'width':percent+'%'});
}


$('#maindiv').hide('slide', {direction: 'left'}, 2000);
$.post( "examck.php", {"option_no":$(this).val(),"question_id":$("#question_id").val()},function(return_data,status){


if(return_data.next=='T'){

$("#question_id").val(return_data.data.question_id);
$('#q1').html(return_data.data.q1);
$('label[for=opt1]').html(return_data.data.opt1);
$('label[for=opt2]').html(return_data.data.opt2);
$('label[for=opt3]').html(return_data.data.opt3);
$('label[for=opt4]').html(return_data.data.opt4);
$('label [for = opt5]').html(return_data.data.opt5);
$('label [for = opt6]').html(return_data.data.opt6);



}
else{$('#maindiv').html("Thank you ");
    $.ajax({ url: 'score.php' });
        var link = $("<a href ='registrationForm.php'>...Close</a>");
        $('#maindiv').append(link);


        }

},"json"); 
$("#f1").delay(1000);
$("#f1")[0].reset();
 $('#maindiv').show('slide', {direction: 'right'}, 1000);


 });

   });
</script>
</body>
</html>


我相信你的问题是“For”循环每次执行时都会100%地产生结果

仔细看看你的逻辑。您设置了“总计=53”。for循环将一直执行,直到“i”小于或等于53。因此,最后一次迭代将是53/53*100,这将始终导致100%

您需要做的是传入一个值(参数)来表示回答了多少问题,并使用该值来确定剩下的百分比

只是一个基于您所写内容的示例:

$("input:radio[name=options]").click(function(numAnswered) {

  //for progress bar 
  var total = 53;  //represents total number of questions

    for(var i=1;i<=numAnswered;i++){
        var percent = (i/total*100);
        $('#progress .progress-text').text(percent + '%');
            $('#progress .progress-bar').css({'width':percent+'%'});
    }
}
$(“输入:收音机[name=options]”)。单击(函数(numAnswered){
//用于进度条
var total=53;//表示问题总数
对于(var i=1;i