无法在javascript中使用条件隐藏div [英] Not able to hide div using condition in javascript
本文介绍了无法在javascript中使用条件隐藏div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个包含测验的网站，用于从数据库加载问题，一次一个。在所有问题结束时，显示分数。我创建了一个如下所示的计时器：
var tim;
var min = 25;
var sec = 01;
var f = new Date（）;
函数f1（）{
f2（）;
document.getElementById（starttime）。innerHTML =您开始在+ f.getHours（）+：+ f.getMinutes（）;
函数f2（）{
if（parseInt（sec）> 0）{
sec = parseInt（sec） - 1;
document.getElementById（showtime）。innerHTML =时间离开：< br> +分钟+分钟+秒+秒钟;
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 =时间离开：< br> +分钟+分钟+秒+秒钟;
tim = setTimeout（f2（），1000）;
$ setTimeout（function（）{
alert（5分钟剩余）;
}，1200000 ）;
< div class = ZARA >
< form align =centerid =form1runat =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结果：< / h2>
< p>您的分数是：{$ _SESSION ['correct_score']} out of 25< / p>
< script>
$（'button [onclick ='getPreQuestion（）''''）。hide（）;
$（'。zara'）。hide（）;
< / script>
< / div>;
}
一切正常，但计时器div是不隐藏。我希望在显示分数/所有问题结束时隐藏计时器div。
解决方案确保你的javascript是在包含jQuery之后执行。
试试这种方式：
<？php
if（$ number_of_all_questions< = $ _POST ['next_id']）{// Quiz finished，show results
echo< div>
< h2>结果：< / h2>
< p>您的分数是：{$ _SESSION ['correct_score']}中的25个< / p>
< / div>;
$ finished = 1;
}
？>
< script>
//让我们将它从php变量存储到javascript
var finished =<？php echo $ finished;？>;
$（document）.ready（function（）{
if（finished === 1）{
$（'。zara'）。hide（）;
}
}）;
< / script>
I have created a website with quiz, where questions are loaded from database, one at a time. At the end of all questions, score is shown. I have created a timer for like below:
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>
The score is displayed in the same page using ajax and I have done the following script if all questions are over:
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>";
}
Everything works fine but the timer div is not hidden. I want to hide the timer div when the score is shown/ when all questions are over.
解决方案
Make sure that your javascript is being executed after jQuery is being included.
Try this way:
<?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>
这篇关于无法在javascript中使用条件隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
