Question

我正在为一个班级进行测验，对Javascript来说有些新手。我需要将问题的背景颜色交替，我已经想到了。一旦正确回答每个问题，他们还需要更改颜色，因此当单击正确的单选按钮时，问题的背景颜色会立即更改，例如从白色变为蓝色。我确信它很简单，我似乎无法弄清楚从哪里开始这样做。任何正确方向的帮助表示赞赏。以下是我测验的示例，以及我目前对Javascript的所有内容。

＆＃13;

if (jQuery) {
  var checkAnswers = function() {
    var answerString = "";
    var answers = $(":checked");
    answers.each(function(i) {
      answerString = answerString + answers[i].value;
    });
    $(":checked").each(function(i) {
      var answerString = answerString + answers[i].value;
    });
    checkIfCorrect(answerString);
  };

  var checkIfCorrect = function(theString) {
    if (parseInt(theString, 16) === 811124566973) {
      var d = document.getElementById("question1");
      var e = document.getElementById("question3");
      var f = document.getElementById("question5");
      var g = document.getElementById("question7");
      var h = document.getElementById("question9");
      var i = document.getElementById("question2");
      var j = document.getElementById("question4");
      var k = document.getElementById("question6");
      var l = document.getElementById("question8");
      var m = document.getElementById("question10");
      d.className += "correctOdd";
      e.className += "correctOdd";
      f.className += "correctOdd";
      g.className += "correctOdd";
      h.className += "correctOdd";
      i.className += "correctEven";
      j.className += "correctEven";
      k.className += "correctEven";
      l.className += "correctEven";
      m.className += "correctEven";
      $("h1").text("You Win!");
      $("canvas").show();
    }
  };

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quiz">
  <div id="question1">
    <div class="question">
      Which is not a main file type that we use to make websites?
    </div>
    <input type="radio" name="question1" value="a" />
    <label>.html</label>
    <input type="radio" name="question1" value="b" />
    <label>.exe</label>
    <input type="radio" name="question1" value="c" />
    <label>.js</label>
    <input type="radio" name="question1" value="d" />
    <label>.css</label>
  </div>

＆＃13;

Answer 1

也许在单选按钮上使用onchange（此代码未经过测试）

onchange="checkanswer(this)"

function checkanswer(ele){
   if(ele.value=="A")
       ele.style.backgroundColor = 'green';
   else
       ele.style.backgroundColor = 'red';
}

但是使用javascript检查答案是一个糟糕的行为，你应该在服务器端检查它，否则，人们可以使用ctrl + u找到正确的答案......

Answer 2

试试这个：

jQuery('input[value="a"]').click(function(){
 if (jQuery(this).is(':checked'))
 {
 jQuery('body').css("background-color", "blue");
 }
});
jQuery('input[value="b"]').click(function(){
 if (jQuery(this).is(':checked'))
 {
    jQuery('body').css("background-color", "purple");
 }

等

2个重要说明： css（“background-color”，“blue”），“blue”可以是rgb颜色。 jQuery（'input [value =“b”]'）是一个选择器，它选择值为“b”的所有文档按钮。如果你有很多b值比例按钮，你最好选择Id。

检查它是否有效：https://jsfiddle.net/Aschab/d4qmhuq1/

根据Javascript中的正确选择进行测验并需要更改背景颜色

2 个答案: