0

1 つの画像が表示され、ボタンをクリックすることができます。ボタンのクラスが画像のクラスと一致する場合 (つまり、あなたが正しい)、メッセージを印刷したいと考えています。そして、私は。

しかし、クラスが一致しない場合は、推測が間違っているというメッセージを表示したいと考えています。より簡単に示されます。だからここに私のjQueryがあります：

$(document).ready(function(){

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

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

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

    if($(this).hasClass('happy') && $("img").hasClass('happy')){
        $('h2').replaceWith("<h2>You are correct!</h2>");
    }else if(!$('img').hasClass('happy')){
    alert("LOL");
    };
});
});

ボタンが押された場合に h2 を表示する私のコードの最初の部分は動作します。しかし、2 番目の部分 (else if( ! $('img').hasClass('happy'))) はそうではありません。なんで？

私の HTML: http://jsfiddle.net/WEAt6/3/

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>
       gzzzz
    </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="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
            <div class="pic">
                <img class="happy" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
            <div class="pic">
                <img class="right" src="http://upload.wikimedia.org/wikipedia/commons/5/55/Happy_man.jpg"/ >
            </div>
        </div>

        <div id="score">
            <h2></h2>
            </div>
    </div>
</body>
<script src="jQuery.js"></script>
<script src="stuff.js"></script>
</html>
​
4

3 に答える 3

5

ifステートメントのロジックには2 つの条件があります。$(this).hasClass('happy')したがって、これは false である可能性がありますが、 $("img").hasClass('happy')( 内のelse if) は true であるため、ifブロックもelse ifブロックのコードも実行されません。

いくつかの補足事項:

  1. $("img").hasClass('happy')ドキュメント内に class があるかどうかがわかります 。HTML を引用していませんが、言及する価値があるようです。したがって、そのクラスのイメージがあるため、常に true になります。特定の画像を確認したい場合は、2 番目のクラスを指定して使用するか、位置によって行うことができます:最初は 2 番目 (は 0 ベース) など。imghappy$("img.theOtherClass").hasClass("happy")$("img").first().hasClass("happy")$("img").eq(1).hasClass('happy')eq

  2. $('h2').replaceWith("<h2>You are correct!</h2>");h2を別の new に置き換えh2ます。おそらくその内容を変更するだけの方が良いでしょう: $('h2').html('You are correct!');.

  3. 上記の #2 のコード (あなたと私の両方) は、ドキュメント内のすべての h2要素を変更します。繰り返しますが、それで問題ないかもしれませんが、強調する価値があるようです。$("#score h2").html("You are correct!");要素内のものをid "score".

于 2012-12-12T11:52:08.050 に答える
0

なぜあなたはを使用していelse ifますか？確かに、クラスがあるかどうかを確認しています。2 回目の比較を行う必要はありません。使うだけelse

if($(this).hasClass('happy') && $("img").hasClass('happy')){
    $('h2').replaceWith("<h2>You are correct!</h2>");
}else {
    alert("LOL");
}
于 2012-12-12T11:53:44.297 に答える
0

エラーはログにあります。デモを参照してください: DEMO

$('#answers div').click(function(){

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

        if($(this).hasClass('happy') && $("img").hasClass('happy')){

            $('h2').replaceWith("<h2>You are correct! Happiness looks the same on everybody.</h2>");
            setTimeout(trolli,2000);
            function trolli(){

             sadgame = $('.thegame').html('<div class="pic"><img class="left" src="http://f1.pepst.com/c/01850B/322662/ssc3/home/062/dard-sms/sad_wom_an.jpg_480_480_0_64000_0_1_0.jpg"/ ></div><div class="pic"><img class="sadness" src="http://f1.pepst.com/c/01850B/322662/ssc3/home/062/dard-sms/sad_wom_an.jpg_480_480_0_64000_0_1_0.jpg"/ ></div><div class="pic"><img class="right" src="http://f1.pepst.com/c/01850B/322662/ssc3/home/062/dard-sms/sad_wom_an.jpg_480_480_0_64000_0_1_0.jpg"/ ></div>');
            $('h2').replaceWith("<h2>What emotion is being shown?</h2>");
            $('.left').hide();
            $('.right').hide();

            }

        }else if(!$(this).hasClass('happy')){
            alert("LOL");
        };
    });
于 2012-12-12T12:04:06.793 に答える