Javascript 随机显示/隐藏不起作用

标签 javascript html hide show

我正在使用这个 javascript/jquery 隐藏页面的一部分并显示新的部分。昨天还可以,今天我来了,就不行了。我做了一些编辑,例如添加“下雪”javascript,以及单击按钮时更改背景颜色的 javascript 代码,但我删除了更改的所有内容,但它仍然不起作用...这是我的全部代码...

<html><head>

     <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" >
<script type="text/javascript"> <!-- Hides something then shows something. -->
function friedrice(id, id2) {
     $('#' + id).hide(); 
     $('#' + id2).show(); 

}
</script>


<script type="text/javascript"> <!-- Show stuff with fade in -->
    function showStuff(id) {
        document.getElementById(id).style.display = 'block';
object = document.getElementById(id)

$(object).hide();
        $(object).fadeIn(1000);
    }
</script>




<script type="text/javascript"> <!-- Hides hidden stuff on load -->

$(document).ready(function(){ 
    $('#swf').hide(); 
    $('#surprise').hide();
}); 

</script>

<script type="text/javascript"> <!-- Shows stuff -->
function katana(id) {
     $('#' + id).show();

}
</script>


<script type="text/javascript"> <!-- Popup on exit -->
function box()
{
var r=confirm("Content") 
if (r==true)
  {
  window.location.href="russia.html";
  }
else
  {
  window.location.href="china.html";
  }
}
</script>


</head>
    <body onunload="box()";
    <div id="chopsticks"> <!-- This is the "main" content that is displayed before the last checkbox is checked -->
    <OBJECT id="swf" style="z-index:2; position:absolute; top:20%; left:15%;" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="90%" HEIGHT="70%" id="rice" ALIGN=""><PARAM NAME=movie VALUE="rice.swf"><PARAM NAME=quality VALUE=low><EMBED src="rice.swf" quality=low bgcolor=#EEEEEE WIDTH="90%" HEIGHT="90%" NAME="rice" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>

<center><h1>Logo Here!</h1><br>
</center>
                    <span id="a1" style="display: block;"><div class="texts" >
                                    <div class="title" >
                    <strong>Step 1</strong><br><br>
                </div>

<div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check1" id="sample_check1" value="1" type="radio" onclick="showStuff('a2')"  />
Done?
    </label></div></span>
<br>
                    <span id="a2" style="display: none;"><div class="texts">

                                    <div class="title" >
                    <strong>Step 2</strong><br><br>
                </div>

<div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check2" id="sample_check2" value="1" type="radio" onclick="showStuff('a3');" />
Done?
    </label>
                </div></span>
<br>
                    <span id="a3" style="display: none;"><div class="texts">

                                    <div class="title" >
                    <strong>Step 3</strong><br><br>
                </div>
                    <div class="rice">Content<br></div>
<label class="label_check" >
    <input name="sample_check3" id="sample_check3" value="1" type="radio" onclick="showStuff('stage');setTimeout(katana, 10000, 'swf');setTimeout(friedrice, 12000, 'chopsticks', 'surprise');" /> <!-- The showStuff function will show an image with a fade in. The katana function will show the swf, then 2 seconds later, the "friedrice" function will remove all of the the content on the page including the swf and show new "surprise" content. -->
Ready?
    </label>
                </div></span>

        <span id="stage" style="display:none;">
            <img src="images/dot.png" style=" position:absolute; left:44%; top:20%;"/>
        </span>


                    <script>
        $('body').hide();
        $('body').fadeIn(1000);
    </script>
</div>
<div id="surprise"> <!-- This is the "hidden" content that is displayed 12 seconds after the checkbox is checked -->
<center>
<p> i jo</p>
<embed src="scare.mp3" autoplay="true" loop="true" height="240" width="100" /></embed>
</div>
</center>
</body></html>

这是没有CSS的,因为我认为没有必要。重要的部分都注释了。请原谅我的草率以及变量、函数等的名称。我通常不会给出我的代码 xD。但我不知道发生了什么,我把我改变的一切都改回来了。希望有人能帮忙。谢谢!

最佳答案

object = document.getElementById(id) 之后缺少 ;:

<script type="text/javascript"> <!-- Show stuff with fade in -->
   function showStuff(id) {
      document.getElementById(id).style.display = 'block';
      object = document.getElementById(id);
                                //this one^
      $(object).hide();
      $(object).fadeIn(1000);
}
</script>

var r=confirm("Content") 退出时弹出窗口部分也缺少 ;

关于Javascript 随机显示/隐藏不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12133048/

相关文章:

html - 在 CSS3/Susy 中禁用 "display: none;"

jquery - 淡出并删除表格行

c# - 如何 Conceal/取消 Conceal Facebook 帖子和评论

javascript - 警报/确认按钮必须位于同一页面上

javascript - React Game of Life 无声无息地失败了,我错过了什么?

javascript - 将文本/标题添加到缩略图 slider

javascript - notepad++ 与 Node 使用套接字错误

javascript - 使用 HTML 和 Javascript 的垂直可互换系统

javascript - 如何在 Angular 4 中使用 NgIf 设置输入字段的值

html - Rails html 编码