Javascript 单击错误/正确答案时更改按钮的颜色

我有四个按钮在一个具体的实验部分，这是HTML代码

<div id="test" style="display:none">
        <div class="row center-block text-center">
            <img id="testImage" src="static/img/errorhedgehog.jpg" height="300">
        </div>
        <div class="row text-center center-block">
            <h3 id="labelPrompt">Choose the corresponding label:</h3>
        </div>
         <div class="row text-center center-block">
            <button class="quizChoice btn btn-md btn-info" id="quizChoice0"></button>
        </div>
         <div class="row text-center center-block">
            <button class="quizChoice btn btn-md btn-info" id="quizChoice1"></button>
        </div>
         <div class="row text-center center-block">
            <button class="quizChoice btn btn-md btn-info" id="quizChoice2"></button>
        </div>
         <div class="row text-center center-block">
            <button class="quizChoice btn btn-md btn-info" id="quizChoice3"></button>
        </div>
        <div class="row text-center">
            <p>Press enter or click 'Next' to go to the next item.</p>
            <button id="nextTest" class="btn btn-sm btn-success">Next</button>
        </div>
        <div class="progress">
            <div id="testProgress" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
</div>

---

但是没有任何变化？

您将

右标签和
选择变量名作为jQuery选择器中字符串的一部分，而不是引用值。根据您的示例，尝试以下操作：


var rightLabel='B'；
$（“.quizChoice”）。单击（函数（）{
var theChoice=$（this.text（）；
如果（选择===右标签）{
警惕（“干得好！”）
$（“#”+theChoice.css（“背景色”、“绿色”）；
}否则{
警报（“太糟糕了！正确的标签是“+rightLabel”）；
$（“#”+theChoice.css（“背景色”、“红色”）；
$（“#”+rightLabel）.css（“背景色”、“绿色”）；
}
});

A.
B
您收到了哪个警报？根据我单击的按钮，警报会出现（“干得好！”或“太糟！”），但是颜色没有改变。我确实把你的代码复制到了代码笔中，没有任何效果。这是整个实验的一部分，有不同的训练和测试轮，但我只是复制了我认为最相关的部分。我没有看到HTML中的选择和右标签。它们在哪里？$（
#${theChoice}
）可能是
$（“#”+theChoice）
是吗？@CraigvanTonder，不是，这些是字符串模板。注意背面的记号。这有点像ES6-y，但效果很好。它可能是-它不会对执行产生影响。我只是更喜欢使用模板文本。但是，使用两种样式并不好，因此我更新了答案以匹配问题样式。当然，我理解这一点，只是认为将变量连接到字符串时更容易理解。对于较大的字符串，模板文字可能更有意义：）
var rightLabel = partTest[trial].label
var choiceLabels = ["hola", "hole", "holo", rightLabel];
        $("choiceLabels").css("background-color", "transparent");
        for (var i=0; i<choiceLabels.length; i++) {
            var theID="#quizChoice"+i.toString();
            $(theID).text(choiceLabels[i])

$(".quizChoice").click(function() {
        var theChoice=$(this).text();
        if (theChoice===rightLabel) {
            alert("Good job!")
            $("#rightLabel").css("background-color", "green");
        } else {
            alert("Too bad! The correct label is " + rightLabel);
            $("#theChoice").css("background-color", "red");
            $("#rightLabel").css("background-color", "green");
        }
    });