Question

我创建了一个带测验的网站，其中一次一个地从数据库加载问题。在所有问题结束时，显示分数。我已经为下面创建了一个计时器：

var tim;
var min = 25;
var sec = 01;
var f = new Date();

function f1() {
    f2();
    document.getElementById("starttime").innerHTML = "You Started Your Exam At " + f.getHours() + ":" + f.getMinutes();
}

function f2() {
    if (parseInt(sec) > 0) {
        sec = parseInt(sec) - 1;
        document.getElementById("showtime").innerHTML = "Time Left :<br>" + min + " Minutes ," + sec + " Seconds";
        tim = setTimeout("f2()", 1000);
    } else {
        if (parseInt(sec) == 0) {
            min = parseInt(min) - 1;
            if (parseInt(min) == 0) {
                clearTimeout(tim);
                location.href = "score.php";
            } else {
                sec = 60;
                document.getElementById("showtime").innerHTML = "Time Left :<br>" + min + " Minutes ," + sec + " Seconds";
                tim = setTimeout("f2()", 1000);
            }
        }
    }
}
setTimeout(function() {
    alert("5 minutes remaining");
}, 1200000);

<div class="zara">
    <form align="center" id="form1" runat="server">
        <div>
            <table width="100%" align="center">
                <tr>
                    <td colspan="2">
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="col_third end">
                            <div class="hover panel">
                                <div class="front">
                                    <div class="box1">
                                        <p>
                                            <div id="showtime"></div>
                                        </p>
                                    </div>
                                </div>
                                <div class="back">
                                    <div class="box2">
                                        <p>
                                            <div id="starttime"></div>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div id="starttime"></div><br /> -->
                        <div id="endtime"></div><br />
                        <!-- <div id="showtime"></div> -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <br />
                    </td>
                </tr>
            </table>
            <br />
        </div>
    </form>
</div>

使用ajax在同一页面中显示分数，如果所有问题都结束，我已完成以下脚本：

if($number_of_all_questions <=$ _POST[ 'next_id']){ // Quiz finished, show results echo
  "<div>
   <h2>Results:</h2>
    <p>Your score is: {$_SESSION['correct_score']} out of 25</p>
      <script>
      $('button[onclick='getPreQuestion()']').hide();
    $('.zara').hide();
    </script>
  </div>";
}

一切正常但计时器div没有隐藏。我想在显示分数/所有问题结束时隐藏计时器div。

Answer 1

确保在包含jQuery之后正在执行你的javascript。

尝试这种方式：

<?php
    if($number_of_all_questions <= $_POST[ 'next_id']){ // Quiz finished, show results 
    echo "<div>
        <h2>Results:</h2>
        <p>Your score is: {$_SESSION['correct_score']} out of 25</p>
        </div>"; 
    $finished = 1;
    }
?>


    <script>
    // let's store it from php variable to javascript
    var finished = "<?php echo $finished; ?>";
    $(document).ready(function(){
        if(finished === 1) {
           $('.zara').hide();
        }
    });
    </script>

Answer 2

Your script will never run when you get it as a response from an ajax-call, unless you use some evil eval().

Make a function called hide() and load it with your normal javascript:

function hide{
   $('button[onclick='getPreQuestion()']').hide();
   $('.zara').hide();
}

In your PHP only echo the div:

<?php
if($number_of_all_questions <=$ _POST[ 'next_id']){
 echo "<div>
    <h2>Results:</h2>
    <p>Your score is: {$_SESSION['correct_score']} out of 25</p>
    </div>";
 }

and in your ajax-code look for a clue the game has ended. Something like (I don't know much abouth jQuery, so there could be errors in here):

$.ajax({
  ....,
  success: function(result){
        //search for the word 'Results:'. This will return -1 if not found
        var n = result.search("Results:");
        //If the word is found, run function hide() 
        if(n>=0)hide();
       },
  ....
});

Answer 3

为了善良，学会简化问题只针对手头的问题，不要只是转储整个代码。会让我们更容易，更快地回答它！

只需将提交按钮更改为您的表单提交或其他任何内容。我不会自己整理所有代码（对不起）。这应该作为工作模板

 var inv = document.getElementById('invisiblediv');
 var submitb = document.querySelector('button');
 
 submitb.addEventListener('click',function(){
  alert('Submitted form in time!');
  inv.style.visibility = 'visible';
  clearTimeout(testtimer);
 });
 
 var testtimer = setTimeout(function(){
    alert('Time limit expired, showing results!');
    inv.style.visibility = 'visible';
 }, 8000);

#invisiblediv {
  visibility: hidden;
  border: 1px solid black;
  padding: 2px;
  margin-bottom: 10px;
}

<div id="invisiblediv">Hello world!</div>
<button>Show hidden results</button>

无法在javascript中使用条件隐藏div

3 个答案: