2014-02-06 2 views
0

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의 들여 쓰기에 대해 죄송합니다. 왜 그런 식으로 표시되는지 모르겠다.

+0

을 사용하여 당신이 관심이 있다면 여기에 JSFiddle이야

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

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

대신 .

사용으로 접두사 할 필요가 없습니다. http://jsfiddle.net/#&togetherjs=rP95pwLxKi – Chad

답변

2

클래스 이름 즉 correctAnswer 만 제공하면됩니다. 마찬가지로 removeClass("wrongAnswer");

+0

Thanks @Satpal. 나는 변화를 만들었지 만 여전히 효과가 없다. – Chad

+0

@Chad, 선택기가 올바른가요? 내가'$ ("radio"+ answer + "label")' – Satpal

+0

셀렉터가 맞을 것 같아요. 나에게 올바른 라벨을주기 때문에 $ ("# radio"+ answer + "+ label")이 필요하다. – Chad

관련 문제