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

Question

我在实验的特定部分有四个按钮，这是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>

四个不同的答案出现在按钮上。正确的一个在脚本中定义，其他三个出现在其他按钮上。

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");
        }
    });

但什么都没有改变？

Answer 1

您将rightLabel 和theChoice 变量名称作为字符串的一部分放在jQuery 选择器中，而不是引用该值。根据您的示例尝试这样的操作：

var rightLabel = 'B';

$(".quizChoice").click(function() {
  var theChoice = $(this).text();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quizChoice" id="A">A</div>
<div class="quizChoice" id="B">B</div>