JS/JQuery를 배우려고하고있어이 작은 퀴즈 앱을 작성했습니다. 사용자가 제출을 클릭 할 때 잘못된 대답과 정확한 대답을 강조하고 싶지만 작동하지 않습니다..addClass가 라디오와 작동하지 않습니다.
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>
퀴즈의 모든 데이터 (질문/가능한 답변/정답 여기
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입니다 : 여기
는 기능입니다)는 배열에 저장됩니다.
CSS의 들여 쓰기에 대해 죄송합니다. 왜 그런 식으로 표시되는지 모르겠다.
을 사용하여 당신이 관심이 있다면 여기에 JSFiddle이야
의
대신
.
사용으로 접두사 할 필요가 없습니다. http://jsfiddle.net/#&togetherjs=rP95pwLxKi – Chad