0

显示一张图片，您可以单击一个按钮。如果按钮类与图片的类匹配（即您是正确的） - 我想打印一条消息。我是。

但是，如果类不匹配，我希望显示一条消息，说明猜测错误。它更容易显示。所以这是我的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 - 有效。但第二部分 - 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您的陈述的逻辑有两个条件。所以它可能$(this).hasClass('happy')是假的，但$("img").hasClass('happy')（在else if）是真的，所以if块和else if块的代码都不会运行。

一些旁注：

  1. $("img").hasClass('happy')会告诉你文档中是否有任何 img类happy。您没有引用您的 HTML，但似乎值得一提。所以，既然你确实有那个班级的形象，那将永远是真的。如果你想检查一个特定的图像，要么给它第二个类并使用$("img.theOtherClass").hasClass("happy")，或者你可以按位置来做：$("img").first().hasClass("happy")对于第一个，$("img").eq(1).hasClass('happy')对于第二个（eq基于 0）等等。

  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？当然，您正在检查 is 是否有课程。无需进行第二次比较。只需使用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 回答