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

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

当您从 ajax 调用中获取脚本作为响应时，您的脚本将永远不会运行，除非您使用了一些邪恶的 eval()。

创建一个名为 hide() 的函数并使用普通的 javascript 加载它：

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

在你的 PHP 中只回显 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>";
 }

并在您的 ajax 代码中寻找游戏结束的线索。类似的东西（我对 jQuery 不太了解，所以这里可能会有错误）：

$.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>