.addClass 不适用于收音机

Question

我正在尝试学习 JS/JQuery，所以我编写了这个小测验应用程序。我想在用户点击提交时突出显示错误答案和正确答案，但它不起作用。

函数如下：

function correctAnswer () {
    var answer = questions[questionNumber].correct;
    console.log("answer =" + answer)
    $("#radio" + answer + "+ label").addClass(".correctAnswer");
    questionNumber++
 };

 function wrongAnswer () {
    var answer = questions[questionNumber].correct;
    var userAnswer = $(".list input[type=radio]:checked").val();
    if (answer != userAnswer) {
        $(".list input[type=radio]:checked" + "+ label").addClass(".wrongAnswer");
    }
    questionNumber++
 };

这是 CSS：

input[type=radio] + label {
    font-family: Helvetica;
color:#FFF;
font-size: 18px;
text-align: center; 
border-style: none;
background: #4592FF;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    width:100%;
    cursor: pointer; cursor: hand;
}
input[type=radio]:checked + label { 
background-image: none;
background-color:#1646B5;
}
.correctAnswer {
font-family: Helvetica;
color:#FFF;
font-size: 18px;
text-align: center; 
border-style: none;
    background: #4592FF;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    width:100%;
    cursor: pointer; cursor: hand;
}
.wrongAnswer {
font-family: Helvetica;
color:#FFF;
font-size: 18px;
text-align: center; 
border-style: none;
    margin-left: auto;
padding-top: 10px;
    padding-bottom: 10px;
    width:100%;
    cursor: pointer; cursor: hand;
background:#FF4B19;
}

和 HTML：

<ul class="list">
                <li>
                    <input type="radio" id="radio0" name="radios" value="all">
                    <label for="radio0"></label>
                </li>
                <li>    
                    <input type="radio" id="radio1" name="radios"value="false">
                    <label for="radio1"></label>
                </li>
                <li>
                    <input type="radio" id="radio2" name="radios" value="true">
                    <label for="radio2"></label> 
                </li>   
                <li>
                    <input type="radio" id="radio3" name="radios" value="true">
                    <label for="radio3"></label> 
                </li>
            </ul>

所有测验数据（问题/可能的答案/正确答案）都存储在一个数组中。

对 CSS 的缩进感到抱歉。不知道为什么会这样显示

Answer 1

您只需要提供类名，即正确答案。你不需要在它前面加上.

使用

$("#radio" + answer + "+ label").addClass("correctAnswer");

而不是

$("#radio" + answer + "+ label").addClass(".correctAnswer");

类似使用removeClass("wrongAnswer");