-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

Firefoxでfirebugを起動すると、問題が発生する可能性があります。それはあなたのトロリ機能を見つけていません。

その関数とスコア変数をdocument.ready呼び出しの範囲外に移動してみてください。

于 2012-12-13T23:30:13.407 に答える
0

あなたが持っているすべての場所$(numbz)、それをに変更し$('#numbz')ます。

于 2012-12-13T23:42:33.450 に答える