为什么以下代码有不同的结果？

时间：2016-06-14 07:02:35

标签： javascript html

我有一个项目，我使用HTML CSS和JavaScript创建一个虚拟工作站。

代码工作顺利，完美，如下图所示（减去图像）

＆＃13;
＆＃13; 
<!DOCTYPE html>

<html>
<head>
    <title>Malfunction Compueter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>

<style>
    html{
        font-family: courier
    }
    
    .inner{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
        font-size: 20px;
        opacity: 1.0;
    }
    
    .loadScreen {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 999999999999999999999999999999999999999999;
        background: white;
        font-size: 80px;
        text-align: center;
        padding-top: 150px
    }
        #cover{
        position: relative
        
    }
    
    #content{
        padding-top: 50px
    }
    
    td{
        width: 33.3%
    }
    
    table{
        width: 100%;
        text-align: center
    }
    
    .titleSelection{
        font-size: 60px;
        transition-duration: 0.5s;
        line-height: 10px
    }
    
    .titleSelection:hover{
        box-shadow: 0 15px 19px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }
    
    .title{
        text-align: center;
        padding-top: 40px;
    }
    
    #titleImage{
        height: 200px
    }
    
    .selectionIcon{
        height: 120px
    }
    
    #backgroundImage{
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        z-index: -9999;
        text-align: center
    }
    
    #background{
        width: 100%;
        bottom: 0px
    }

    #title{
        font-size: 60px;
        font-family: "kaiTi";
        text-align: center;
        line-height: 5px
    }
    
    #exit{
        position: fixed;
        bottom: 10px;
        right: 40px;
        z-index: 99999
    }
    
    #exit:hover + #exitText{
        font-size: 30px
    }
    
    #exitText{
        transition-duration: 0.5s;
        font-family: "kaiTi";
        position: fixed;
        bottom: 45px;
        right: 45px;
        z-index: 99999;
        text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
        color: white;
    }
    
    #fangNiu{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 200px;
        height: 74px;
        z-index: 999999;
    }
    
    .innerTitle{
        font-size: 80px;
        text-align: center
    }
    
    .goodQuotesTable{
        width: 20%;
        font-size: 25px;
        text-align: justify;
        padding-right: 10px;
        padding-left: 10px;
    }
    
    #quotesTable{
        border-collapse: collapse;
        vertical-align: bottom;
    }
    
    b{
        font-size: 45px;
        text-align: center
    }
    
    .quoteImage{
        height: 50px;
        width: 50px;
    }
    
    #summary{
        border: 10px;
    }
    
    .quote{
        color: black;
    }
    
    
        /* tell the container's children to float left: */
    .floatLeft > * {
        float:left;
        margin-right:5px;
    }
    
    .floatRight > * {
        float:right;
        margin-left:5px;
    }
    
    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    /* end clearfix*/
    
    /* below is just to make things easier to see, not required */
    body > div {
        margin-bottom:10px;    
    }

    .characterPicture{
        height: 140px;
        width: auto
    }
    
    #summaryText{
        text-align: center;
        font-size: 80px
    }
    
    .characterText{
        font-size: 25px;
    }
    
    .tab{
        position: relative;
        margin-left: 120px;
        margin-right: 10px;
    }
    
    #summaryItself{
        padding: 10px
    }
    
    #schoolImage{
        height: 290px;
        width: auto
    }
    
    button{
            border-radius: 50%;
            background-color: #00FF04;
            border-color: #00FF04;
            color: white;
            font-size: 40px;
            transition-duration: 0.4s;
            width: 25%;
            height: 80px;
        }
        
        button:hover{
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            background-color: red;
            border-color: red;
        }
    
    #options{
        text-align: center
    }
    
    #apps{
        text-align: center
    }
    
    #languageMenu{
        opacity: 0.9;
        height: 100%;
        width: 100%;
        z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999;
    }
    
</style>

<body>
    
<p id="title">Malfunction Compueter</p><br><p id="title">Version A0.1</p>

<div id="content">
<table id="titleSelections">
    <tr>
        <td class="titleSelection" id="about"><img src="images/info.png" class="selectionIcon"><br><p>About</p></td>
        <td class="titleSelection" id="settings"><img src="images/settings.png" class="selectionIcon"><br><p>Settings</p></td>
        <td class="titleSelection" id="apps"><img src="images/apps.png" class="selectionIcon"><br><p>Apps</p></td>
    </tr>
</table>

<script>

$(document).ready(function(){
    $(".loadScreen").fadeOut("slow")
})



$(document).ready(function(){
        $(".inner").fadeOut(0)
        $("#exit").fadeOut(0)
        $("#exitText").fadeOut(0)
        $("#languageMenu").fadeOut(0)
    })
    
    $("#about").on("click",function(){
        $("#info").fadeIn(500)
        $("#exit").fadeIn(500)
        $("#exitText").fadeIn(500)
        $("#fangNiu").fadeIn(500)
        $("#backgroundImage").fadeOut(500)
    })
    
    $("#settings").on("click",function(){
        $("#options").fadeIn(500)
        $("#exit").fadeIn(500)
        $("#exitText").fadeIn(500)
        $("#fangNiu").fadeIn(500)
        $("#backgroundImage").fadeOut(500)
    })
    
    $("#apps").on("click",function(){
        $("#applications").fadeIn(500)
        $("#exit").fadeIn(500)
        $("#exitText").fadeIn(500)
        $("#fangNiu").fadeIn(500)
        $("#backgroundImage").fadeOut(500)
    })
    
    $("html").on("click","#exit",function(){
        $("#exit").fadeOut(500)
        $("#exitText").fadeOut(500)
        $(".inner").fadeOut(500)
        $("#fangNiu").fadeOut(500)
        $("#languageMenu").fadeOut(500)
        $("#backgroundImage").fadeIn(500)
    })
    
    $("#language").on("click",function(){
        $("#languageMenu").fadeIn(500)
    })

</script>
</body>

<div class="loadScreen">MALFUNCTION COMPUETER <br> MODEL A0.1</div>

<img src="images/logout.png" id="exit">

<p id="exitText">Exit</p>

<div id="options" class="inner" style="display: none">
    <b>OPTIONS</b>
    <br>
    <br>
    <br>
    <button id="language">Languages</button>
    <br>
    <br>
    <br>
    <button id="wifi">Wifi connection</button>
</div>

<div id="applications" class="inner" style="display: none">
    <b>APPS</b>
</div>

<div id="info" class="inner" style="display: none">
    <b>ABOUT MALFUNCTION COMPUETER</b>
    <p>Malfunction compueter is a 非常好的 computer software OS that runs on 你的电脑屏幕上 in the programming language 语文。.</p><br>
    <p>In order to get the best out of malfunction compueter, one must 把你的脸爆炸，然后, and then one must also 死掉。这样.</p>
</div>

<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
    <option>English</option>
    <option>Chinese</option>
    <option>Japanese</option>
</select></div>

</html>
＆＃13;
＆＃13;
＆＃13;

但是，有一组线路无法正常运行：

<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
    <option>English</option>
    <option>Chinese</option>
    <option>Japanese</option>
</select></div>

^这是DIV＆＃34;＃languageMenu＆＃34;，用户选择他的语言。

在这里，我有一个按钮＃34;＃language＆＃34;点击后，应该是＃34;＃languageMenu＆＃34;出现。

$("#language").on("click",function(){
    $("#languageMenu").fadeIn(500)
})

奇怪的是，当我在谷歌浏览器上运行它时，这不起作用，但当我把它放在JSFiddle中时，它会产生奇怪的结果。

http://jsfiddle.net/b58Lvtfy/1

从Chrome中，只有在按下退出按钮后才会显示语言菜单，然后立即淡出。

为什么会这样，以及哪些修正可能会使代码更好？

在线演示：http://garridpunching.neocities.org/malfunction.html

2 个答案:

答案 0 :(得分：1)

将每个事件绑定放在doc ready块中：

$(document).ready(function() {
  $(".inner").fadeOut(0)
  $("#exit").fadeOut(0)
  $("#exitText").fadeOut(0)
  $("#languageMenu").fadeOut(0)


  $("#about").on("click", function() {
    $("#info").fadeIn(500)
    $("#exit").fadeIn(500)
    $("#exitText").fadeIn(500)
    $("#fangNiu").fadeIn(500)
    $("#backgroundImage").fadeOut(500)
  })

  $("#settings").on("click", function() {
    $("#options").fadeIn(500)
    $("#exit").fadeIn(500)
    $("#exitText").fadeIn(500)
    $("#fangNiu").fadeIn(500)
    $("#backgroundImage").fadeOut(500)
  })

  $("#apps").on("click", function() {
    $("#applications").fadeIn(500)
    $("#exit").fadeIn(500)
    $("#exitText").fadeIn(500)
    $("#fangNiu").fadeIn(500)
    $("#backgroundImage").fadeOut(500)
  })

  $("html").on("click", "#exit", function() {
    $("#exit").fadeOut(500)
    $("#exitText").fadeOut(500)
    $(".inner").fadeOut(500)
    $("#fangNiu").fadeOut(500)
    $("#languageMenu").fadeOut(500)
    $("#backgroundImage").fadeIn(500)
  })

  $("#language").on("click", function() {
    $("#languageMenu").fadeIn(500)
  })

})

因为您的按钮出现在事件绑定之后，因此没有事件绑定在此元素上并导致错误。这就是为什么将事件绑定放在doc ready块中总是安全的。

或者您可以将脚本移至</body>的结束位置。

答案 1 :(得分：0)

您的inproper缩进模糊了错误，但是在绑定DOMReady单击侦听器之前，您正在关闭#language侦听器。因此，添加单击侦听器时，DOM中不存在#language。

相关问题
最新问题