2012-08-26 107 views
0

我使用这个javascript/jquery来隐藏我的页面的一部分,并显示一个新的部分。它昨天正在工作,然后我今天来了,它不工作。我做了一些编辑,比如添加了一个“下雪”的javascript,以及一个javascript代码,它通过点击一个按钮来改变bg颜色,但是我删除了所有改变了的东西,但它仍然不起作用......这是我的整个代码...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,因为我认为这是没有必要的。重要的部分被评论。请原谅sloppiness和变量名称,函数等我通常不会给我的代码xD。但我不知道发生了什么,我改变了所有改变的事情。希望有人能帮忙。谢谢!

+1

你有没有试过清除缓存?有时脚本会被缓存,并且在刷新缓存之前,它不会使用新代码进行更新。这发生在我清理我的浏览器(Firefox)中的缓存之前和之后,它又开始工作了。 – Ishikawa

+0

@Ishikawa是的,我试过多个浏览器,清除缓存,甚至多台电脑。当我改变东西的时候,那里肯定会有一些萦绕不去的代码。我真的不知道。 –

回答

2

有一个;后失踪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> 

变种r=confirm("Content")也少了一种;在退出部分弹出

+0

是的,我刚刚也看到了。这绝对是破坏代码。在添加分号后查看它是否有效。 – Ishikawa

+0

+1其始终是小东西。 –

+0

我修正了这个问题,没有任何改变。清除缓存还:( –

0

尝试将您的浏览器设置,并清除缓存,这可能帮助了。

+0

已经尝试过:/ –

0

我已经改变了一些代码,现在我没有收到errormessage的:

<html> 
<head> 
<title>Page title</title> 
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css" > 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<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"> 
function box(){ 
    var r = window.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');" /> 
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>