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

您只需提供班级名称，即 correctAnswer 。您无需在.

前加上前缀

使用

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

而不是

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

同样使用removeClass("wrongAnswer");

.addClass不使用无线电

1 个答案: