Question

我有一个函数Selections。然后，我将MultiChoiceQues(theSeq, theQues, theChoices theAns)添加到theQues标记中，然后添加所有相应选项的无序列表，并为每个选项添加无线电输入类型。

在数组变量p中，我为函数allQues[]创建了多个实例，传递了不同的参数。现在，在加载时我会用各自的选项显示所有问题。

如何访问并突出显示所有正确答案？

MultiChoiceQues

var content = "";

function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
  content += '<p>' + theQues + '</p> <ul>';

  theChoices.forEach(function(eachChoice) {
    content += '<li><input type="radio" name="' + theSeq + '"/> ' + eachChoice + '</li>';
  });
  content += '</ul>';
  return content;

  console.log(content);
}

var allQues = [
  new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),

  new MultiChoiceQues(2, "What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília", "Salvador"], 3),

  new MultiChoiceQues(3, "Who won the French open 2016 in Men’s Single category?", ["Novak Djokovic", "Andy Murray", "Rafael Nadal"], 1)
];

function ShowAllQues() {
  document.getElementById("container").innerHTML = content;
}

function ShowAllAns() {
  /* Highlight all the correct answers */
}

body {
  background: #f2f2f3;
  font-family: 'Century Gothic';
  font-weight: 100;
  color: #0193b7;
}
ul {
  list-style: none;
}
ul li:hover {
  cursor: pointer;
  color: #5bb12f;
}
#container {
  border: 10px solid #293e6a;
  padding: 0 0 20px 30px;
  box-shadow: 0 0 5px 5px #c4c4c4;
}
p {
  font-family: 'Eras ITC';
  color: #e792b5;
  font-size: 20px;
  font-weight: normal;
}
.flyingButton {
  position: fixed;
  right: 18px;
  top: 80px;
  height: 50px;
  width: 100px;
  background: #293e6a;
  border-radius: 25px 0 0 25px;
  border: none;
  color: #f2f2f2;
  cursor: pointer;
}
.flyingButton:hover {
  background: #0193b7;
}
.flyingButton:focus {
  outline: 0;
}

Answer 1

将getAnswer方法添加到MultiChoiceQues构造函数中。

function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
  content += '<p>' + theQues + '</p> <ul>';

  theChoices.forEach(function(eachChoice) {
    content += '<li><input type="radio" name="'+ theSeq +'"/> ' + eachChoice + '</li>';
  });

  content+='</ul>';


  this.getAnswer = function () {
      return theAns;
  }
}

然后这是你的答案功能。

function ShowAllAns(){
    /* Highlight all the correct answers */

    var answers = allQues.map(function (question) {
        return question.getAnswer();
    })

    var question_lists = document.getElementById("container").getElementsByTagName('ul');

    for (var i = 0; i < question_lists.length; i++) {
        var answer_index = answers[i];
        var items = question_lists[i].childNodes;

        items[answer_index - 1].style.background = "red";
    } 
}

https://jsfiddle.net/1prr4m7f/3/

Answer 2

尝试使用jQuery：

CSS

body {
     background: #f2f2f3;
     font-family: 'Century Gothic';
     font-weight: 100;
     color: #0193b7;
    }

    ul{
      list-style:none;
    }

    ul li:hover{
      cursor:pointer;
      color:#5bb12f;
    }

    #container {
      border: 10px solid #293e6a;
      padding: 0 0 20px 30px;
      box-shadow: 0 0 5px 5px #c4c4c4;
    }

    p {
      font-family: 'Eras ITC';
      color: #e792b5;
      font-size: 20px;
      font-weight: normal;
    }

    .flyingButton {
      position: fixed;
      right: 18px;
      top: 80px;
      height: 50px;
      width: 100px;
      background: #293e6a;
      border-radius: 25px 0 0 25px;
      border: none;
      color: #f2f2f2;
      cursor:pointer;
    }
    .green{
            color: #1B6F1B;
        font-size: 18px;
    }

    .flyingButton:hover {
      background: #0193b7;
    }

    .flyingButton:focus{
      outline:0;
    }

HTML

<body onload="ShowAllQues();">
   <div id="container">
   </div>
<input type="button" value="Answers" class="flyingButton" onclick="ShowAllAns(); 
return false;">

JS / jQuery的

var content="";
function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
   content += '<p>' + theQues + '</p> <ul>';
   theChoices.forEach(function(eachChoice,index) {
   if(index == theAns-1){
       content += '<li class="options answer"><input type="radio" name="'+ theSeq +'"/> ' + eachChoice + '</li>';
  }else{
       content += '<li class="options"><input type="radio" name="'+ theSeq +'"/> ' + eachChoice + '</li>';
  }
});
content+='</ul>';
return content;
}

var allQues = [
 new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),

 new MultiChoiceQues(2, "What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília", "Salvador"], 3),

 new MultiChoiceQues(3, "Who won the French open 2016 in Men’s Single  category?", ["Novak Djokovic", "Andy Murray", "Rafael Nadal"], 1)
];

function ShowAllQues(){
   document.getElementById("container").innerHTML=content;
}

function ShowAllAns(){
   $(".answer").addClass("green");
}

Answer 3

TL; DR：

添加课程<ul class="answerChoicesGroup">
将return content替换为this.answer = theAns;
创建var获取answerChoicesGroup：answerChoicesGroup = document.getElementsByClassName('answerChoicesGroup');
在showAllAns()中插入以下内容：

function ShowAllAns() {
    /* Highlight all the correct answers */
    for (i = 0; i < allQues.length; i++) {
        // Get the current answer group
        var answerGroup = answerChoicesGroup[i],
            // Access the correct radio input answer by getting the answer index from `allQues`
            correctAnswer = answerGroup.children[allQues[i].answer - 1];

        // Do whatever you'd like with `correctAnswer`
        correctAnswer.firstElementChild.checked = true;
        correctAnswer.classList.add('answer');
    }
}

解释

return content您走在正确的轨道上。而不是那样，（因为你有关键字return content而不会new）我只做了this.answer = theAns。 answer可以是您想要的任何字词。

访问answer的方式就像任何对象一样。即。

var muiltipleChoiceQuestion = new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),

alert(muiltipleChoiceQuestion.answer) // result: 4

我接下来要做的是，为名为ul's的所有answerChoicesGroup添加了一个类名，并为此创建了一个变量。

在showAllAns()函数中，我遍历allQues，并通过以下方式访问了正确的答案：

获取当前答案组。（var answerGroup）
从allQues获取答案索引，以获取正确的电台输入答案。（var correctAnswer）
使用correctAnswer做任何你喜欢的事。

以下是代码：

以下是你将如何做到这一点：

JSFiddle

var content = "";

function MultiChoiceQues(theSeq, theQues, theChoices, theAns) {
  content += '<p>' + theQues + '</p> <ul class="answerChoicesGroup">';

  theChoices.forEach(function(eachChoice) {
    content += '<li><input type="radio" name="' + theSeq + '"/> ' + eachChoice + '</li>';
  });
  content += '</ul>';
  this.answer = theAns;
}

var allQues = [
    new MultiChoiceQues(1, "Who is Prime Minister of England?", ["Obama", "Blair", "Brown", "Cameron"], 4),
    new MultiChoiceQues(2, "What is the Capital of Brazil?", ["São Paulo", "Rio de Janeiro", "Brasília", "Salvador"], 3),
    new MultiChoiceQues(3, "Who won the French open 2016 in Men’s Single category?", ["Novak Djokovic", "Andy Murray", "Rafael Nadal"], 1)
  ],
  answerChoicesGroup = document.getElementsByClassName('answerChoicesGroup');

function ShowAllQues() {
  document.getElementById("container").innerHTML = content;
}

function ShowAllAns() {
  /* Highlight all the correct answers */
  for (i = 0; i < allQues.length; i++) {
    // Get the current answer group
    var answerGroup = answerChoicesGroup[i],
      // Access the correct radio input answer by getting the answer index from `allQues`
      correctAnswer = answerGroup.children[allQues[i].answer - 1];

    // Do whatever you'd like with `correctAnswer`
    correctAnswer.firstElementChild.checked = true;
    correctAnswer.classList.add('answer');
  }
}

body {
  background: #f2f2f3;
  font-family: 'Century Gothic';
  font-weight: 100;
  color: #0193b7;
}
ul {
  list-style: none;
}
ul li:hover {
  cursor: pointer;
  color: #5bb12f;
}
#container {
  border: 10px solid #293e6a;
  padding: 0 0 20px 30px;
  box-shadow: 0 0 5px 5px #c4c4c4;
}
p {
  font-family: 'Eras ITC';
  color: #e792b5;
  font-size: 20px;
  font-weight: normal;
}
.flyingButton {
  position: fixed;
  right: 18px;
  top: 80px;
  height: 50px;
  width: 100px;
  background: #293e6a;
  border-radius: 25px 0 0 25px;
  border: none;
  color: #f2f2f2;
  cursor: pointer;
}
.flyingButton:hover {
  background: #0193b7;
}
.flyingButton:focus {
  outline: 0;
}
.answer {
  color: green;
}

<body onload="ShowAllQues();">
  <div id="container">
  </div>

  <input type="button" value="Answers" class="flyingButton" onclick="ShowAllAns();">
</body>

循环遍历javascript中动态添加的输入类型单选列表的列表

3 个答案:

TL; DR：

解释

JSFiddle