Question

在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。

Answer 1

这段代码实际上存在很多问题。这是工作：

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

这里最大的问题是你错过了}。注意有一个函数trolli（）{然后next}就在else之前，这意味着你从未结束过你的函数。我不确定你想要在哪里结束它，但我做了一个很好的猜测。然后你也没有关闭document.ready（function（）{....你需要学习权力并列出你的代码，这样你就可以看到哪些括号不接近。也是一个很好的ide会指出这很快也很好。另一个错误的是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);
        };


    });
});

Answer 2

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

尝试将该功能和得分变量移到document.ready call范围之外。

Answer 3

您拥有的每个地点$(numbz)，请将其更改为$('#numbz')。

为什么这个jQuery代码在Firefox中不能正常工作？

3 个答案: