Question

显示一张图片，然后点击一个按钮。如果按钮类匹配图片的类（即你是正确的） - 我想打印一条消息。我是。

但如果课程不匹配，我希望显示一条消息，说明猜错了。它更容易显示。所以这是我的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 - 有效。但第二部分 - 否则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>

Answer 1

if声明的逻辑有两个条件。因此，$(this).hasClass('happy')可能为false，但$("img").hasClass('happy')（在else if中）为真，因此if块和else if块的代码都不会运行。

几个附注：

$("img").hasClass('happy')会告诉您文档中的任何 img是否具有类happy。 ~~你没有引用你的HTML，但似乎值得一提。~~因为你确实拥有该类的图像，所以它总是如此。如果您要查看特定图片，请为其指定第二个课程并使用$("img.theOtherClass").hasClass("happy")，或者您可以按位置执行此操作：第一个为$("img").first().hasClass("happy")，第二个为$("img").eq(1).hasClass('happy')（{{ 1}}是基于0的）等等。
eq将$('h2').replaceWith("<h2>You are correct!</h2>");替换为另一个新h2。可能更好的只是改变其内容：h2。
上面＃2中的代码（包括您和我的代码）将更改文档中的所有 $('h2').html('You are correct!');元素。也许，这很好，但似乎值得强调。如果您只想使用h2 $("#score h2").html("You are correct!");更改元素内部的内容，则可以考虑使用id。

Answer 2

为什么使用else if？当然，你正在检查是否有班级。没有必要进行第二次比较。只需使用else

即可

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

Answer 3

错误在日志中请参阅演示： 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");
        };
    });

为什么我的if / else ... if语句不起作用？

3 个答案: