在点击下一个按钮的同时逐个从数据库中提取问题并逐一显示正确的答案

时间:2016-07-09 07:15:47

标签: javascript php html

<form class="form-horizontal" role="form" id='login' method="post" action="answer.php">   
      <?php 
      $email=$_SESSION['usr_id'];

      $res = mysqli_query($dbo,"select * from questions where email=' $email '") or die(mysql_error());
      $rows = mysqli_num_rows($res);

     $i=1;
            while($result=mysqli_fetch_array($res)){  
              ?>
                <?php if($i==1){?>         
                <div id='question<?php echo $i;?>' class='cont'>
                <p class='questions' id="qname<?php echo $i;?>"></p>
                <input type="hidden"  name="qname<?php echo $i;?>" value="<?php echo $result['question'];?>"> <?php echo $i?>.<?php echo $result['question'];?>
                <br/>
                <input type="radio" required value="<?php echo $result['opt1'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt1'];?>
                <br/>
                <input type="radio" required value="<?php echo $result['opt2'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt2'];?>
                <br/>
                <input type="radio" required value="<?php echo $result['opt3'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt3'];?>
                <br/>
                <input type="radio" required value="<?php echo $result['opt4'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt4'];?>
                <br/>
                <input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                                                                      
                <br/>
                <button id='<?php echo $i;?>' class='next btn btn-success' type='button'>Next</button>
                </div>     

                 <?php }elseif($i<1 || $i<$rows){?>

                   <div id='question<?php echo $i;?>' class='cont'>
                <p class='questions' id="qname<?php echo $i;?>"></p>
                <input type="hidden"  name="qname<?php echo $i;?>" value="<?php echo $result['question'];?>"> <?php echo $i?>.<?php echo $result['question'];?>
                <br/>
                <input type="radio" value="<?php echo $result['opt1'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt1'];?>
               <br/>
                <input type="radio" value="<?php echo $result['opt2'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt2'];?>
                <br/>
                <input type="radio" value="<?php echo $result['opt3'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt3'];?>
                <br/>
                <input type="radio" value="<?php echo $result['opt4'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt4'];?>
                <br/>
                <br/><input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                                                                      
                <br/>
                <button id='<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>                    
                <button id='<?php echo $i;?>' class='next btn btn-success' type='button' >Next</button>
                </div>





               <?php }elseif($i==$rows){?>
                <div id='question<?php echo $i;?>' class='cont'>
                <p class='questions' id="qname<?php echo $i;?>"></p>  
                <input type="hidden" name="qname<?php echo $i;?>" value="<?php echo $result['question'];?>" > <?php echo $i?>.<?php echo $result['question'];?>
                <br/>
                <input type="radio" value="<?php echo $result['opt1'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt1'];?>
               <br/>
                <input type="radio" value="<?php echo $result['opt2'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt2'];?>
                <br/>
                <input type="radio" value="<?php echo $result['opt3'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt3'];?>
                <br/>
                <input type="radio" value="<?php echo $result['opt4'];?>" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['opt4'];?>
                <br/>
                <input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                                                                      
                <br/>
                <button id='<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>                    
                <button id='<?php echo $i;?>' name="submit" class='next btn btn-success' type='submit'>Finish</button>
                </div>
      <?php } $i++;} 
      ?>
    </form>
  </div>
</div>

此代码显示同一页面上的所有问题。 但我想逐一展示问题。 有人可以帮我解决脚本的问题。它不起作用。 这个Html和所有的东西都在工作但脚本不起作用。我不明白这段代码中的错误。

 <script>
$('.cont').addClass('hide');
count=$('.questions').length;
 $('#question'+1).removeClass('hide');

 $(document).on('click','.next',function(){
     last=parseInt($(this).attr('id'));     
     nex=last+1;
     $('#question'+last).addClass('hide');

     $('#question'+nex).removeClass('hide');
 });

 $(document).on('click','.previous',function(){
         last=parseInt($(this).attr('id'));     
         pre=last-1;
         $('#question'+last).addClass('hide');

         $('#question'+pre).removeClass('hide');
     });        
</script>

1 个答案:

答案 0 :(得分:0)

Jquery是你的朋友。您可以创建多个按钮,当单击按钮时,分配给此按钮的每个问题都将显示隐藏在第一位的答案。首先在页面加载时隐藏所有元素,然后更改它们以显示是否单击了按钮

<script>
    $( document ).ready(function() {
        $('#your_div_or_element_id').hide();
        $('#button_id').click(function(){
            $('#your_div_or_element_id').show();
        });
    });
</script>