-1

在 Chrome 中，这段代码运行良好。但在 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 中。

4

3 回答 3

1

这段代码实际上有很多问题。它在这里工作：

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

这里最大的问题是你缺少一个}。注意有一个函数 trolli(){ 然后下一个 } 就在 else if 之前，这意味着你从未结束你的函数。我不确定你想在哪里结束它，但我猜得很好。然后你也没有关闭 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-13T23:41:12.817 回答
0

你有的每一个地方，都$(numbz)改成$('#numbz').

于 2012-12-13T23:42:33.450 回答
0

如果您在 Firefox 中启动 firebug，您可以看到问题。它没有找到您的 trolli 功能。

尝试将该函数和 score 变量移到 document.ready 调用的范围之外。

于 2012-12-13T23:30:13.407 回答