爲什麼這個jQuery代碼在Firefox中不能正常工作？

-1

在Chrome中，此代碼工作得很好。但在Firefox中 - 它不。我卡住了...爲什麼這個jQuery代碼在Firefox中不能正常工作？

$(document).ready(function(){ 

var score = 0; 

$('.left').hide(); 
$('.right').hide(); 

$("#score h2").html("What emotion is being shown?").hide().fadeIn('slow'); 

$('.happy').click(function(){ 

    if($(this).hasClass('happy') && $(".thegame").find("img:eq(1)").hasClass("happy")){ 
    $('.left').show(); 
    $('.right').show(); 
    score++; 
    $(numbz).html(score); 
      setTimeout(trolli,3000); 
    function trolli(){ 

     sadgame = $('.thegame').html('<div class="pic"><img class="left" src="img/sadness02.jpg"/ ></div><div class="pic"><img class="sadness" src="img/sad03.jpg"/ ></div><div class="pic"><img class="right" src="img/sadness01.jpg"/ ></div>'); 
     $('.left').hide(); 
     $('.right').hide(); 
     $("h2").removeAttr('id', 'canswer').html("What emotion is being shown?").hide().fadeIn('slow')}; 

     $("h2").attr('id', 'canswer').html("You are correct! Happiness looks the same on everybody!").hide().fadeIn('slow'); 
    } else if(!$(".thegame").find("img:eq(1)").hasClass("happy")){ 
     $("#score h2").attr('id', 'wanser').html("You are not correct! Try again.").hide().fadeIn('slow'); 
     score--; 
     $(numbz).html(score); 
    }; 


});

我的HTML：

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" href="stylesheet.css"> 
    <title> 
     facetest.com 
    </title> 
</head> 

<body> 
    <div id="container"> 
     <div id="answers"> 
     <div class="sadness"> 
      <p class="feelings">SADNESS</p> 
     </div> 
     <div class="anger"> 
      <p class="feelings">ANGER</p> 
     </div> 
     <div class="surprise"> 
      <p class="feelings">SURPRISE</p> 
     </div> 
     <div class="fear"> 
      <p class="feelings">FEAR</p> 
     </div> 
     <div class="disgust"> 
      <p class="feelings">DISGUST</p> 
     </div> 
     <div class="contempt"> 
      <p class="feelings">CONTEMPT</p> 
     </div> 
     <div class="happy"> 
      <p class="feelings">HAPPINESS</p> 
     </div> 

     </div> 

     <div class="thegame"> 
      <div class="pic"> 
       <img class="left" src="img/happy-man.jpg"/ > 
      </div> 
      <div class="pic"> 
       <img class="happy" src="img/happy-woman.jpg"/ > 
      </div> 
      <div class="pic"> 
       <img class="right" src="img/happy-celeb.jpg"/ > 
      </div> 
     </div> 

     <div id="score"> 
      <h2 class="emoz">What emotion is being shown?</h2> 
      <h3 class="playmeist">Score: <div id="numbz">0</div> pts.</h3> 
      </div> 
    </div> 
</body> 
</html>

同樣，這段代碼只是正常工作在Chrome中。但不是在Firefox中。這是爲什麼？ 它只是每次點擊快樂給我1點。但只限於Firefox。

來源

2012-12-13 Sweely

究竟它是如何不工作？ –

它只是不斷給我1點每次都點擊快樂。但只限於Firefox。 – Sweely

正確縮進你的代碼會使它更容易閱讀。 –

如果你在Firefox中啓動firebug，你可以看到這個問題。它沒有找到你的trolli函數。

嘗試將該功能和您的分數變量移動到您的document.ready調用範圍之外。

來源

2012-12-13 23:30:13 digidigo

不是。沒有工作：/ – Sweely

看看有問題的網站：http://facetest.info – Sweely

我看了一下，並更新了我的答案。看看是否有幫助？不知道爲什麼它在Chrome中不同。 – digidigo

實際上這個代碼有很多問題。這是工作：

http://jsfiddle.net/8vdmb/4/

這裏最大的問題是你缺少一個}。注意有一個函數trolli（）{然後下一個}就在else之前，這意味着你永遠不會結束你的函數。我不確定你想要結束它的位置，但我猜測得很好。然後，你也沒有關閉document.ready（function（）{....你需要學習權力並列出你的代碼，所以你可以看到哪些括號不關閉。這一點很快也很好，這是錯誤的另一件事是setTimeout的試圖調用尚未定義的函數，所以我把它定義在那裏完成後移動它

下面的代碼：。

$(document).ready(function(){ 

    var score = 0; 

    $('.left').hide(); 
    $('.right').hide(); 

    $("#score h2").html("What emotion is being shown?").hide().fadeIn('slow'); 

    $('.happy').click(function(){ 

     if($(this).hasClass('happy') && $(".thegame").find("img:eq(1)").hasClass("happy")){ 
      $('.left').show(); 
      $('.right').show(); 
      score++; 
      $(numbz).html(score); 

      function trolli() 
      { 
       sadgame = $('.thegame').html('<div class="pic"><img class="left" src="img/sadness02.jpg"/ ></div><div class="pic"><img class="sadness" src="img/sad03.jpg"/ ></div><div class="pic"><img class="right" src="img/sadness01.jpg"/ ></div>'); 
       $('.left').hide(); 
       $('.right').hide(); 
      } 
      setTimeout(trolli,3000); 
      $("h2").removeAttr('id', 'canswer').html("What emotion is being shown?").hide().fadeIn('slow'); 

      $("h2").attr('id', 'canswer').html("You are correct! Happiness looks the same on everybody!").hide().fadeIn('slow'); 
     } 
     else if(!$(".thegame").find("img:eq(1)").hasClass("happy")){ 
     $("#score h2").attr('id', 'wanser').html("You are not correct! Try again.").hide().fadeIn('slow'); 
      score--; 
      $(numbz).html(score); 
     }; 


    }); 
});

來源

2012-12-13 23:41:12

你有$(numbz)每到一個地方，將其更改爲$('#numbz')。

來源

2012-12-13 23:42:33 Sparky

爲什麼這個jQuery代碼在Firefox中不能正常工作？

回答

相關問題