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

我有一个函数

多选项（theSeq、theQues、theChoices theAns）

。然后，我在

p

标记中添加

theQues

，然后是所有相应选项的无序列表，每个选项的输入类型为radio

在数组变量

allQues[]

中，我为传递不同参数的函数

MultiChoiceQues

创建了多个实例。现在，在加载时，我将显示所有问题及其各自的选项

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

var content=”“；
功能多选（theSeq、theQues、theChoices、theAns）{
内容+=''+theQues+'
'；
forEach（函数）的选择（每个选择）{
内容+=“
”+每个选项+”
”；
});
内容+='
'；
返回内容；
控制台日志（内容）；
}
变量allQues=[
新的多选题（1，“谁是英国首相？”，[“奥巴马”、“布莱尔”、“布朗”、“卡梅伦”]，4），
新的多选题（2，“巴西的首都是什么？”，[“圣保罗”、“里约热内卢”、“巴西利亚”、“萨尔瓦多”]，3），
新的多选题（3，“谁赢得了2016年法网男子单打冠军？”，[“诺瓦克·德约科维奇”、“安迪·穆雷”、“拉斐尔·纳达尔”]，1）
];
函数ShowAllQues（）{
document.getElementById（“容器”）.innerHTML=content；
}
函数ShowAllAns（）{
/*突出显示所有正确答案*/
}

正文{
背景#f2f3；
字体系列：“世纪哥特式”；
字号：100；
颜色：#0193b7；
}
保险商实验室{
列表样式：无；
}
ulli：悬停{
光标：指针；
颜色：5bb12f；
}
#容器{
边框：10px实心#293e6a；
填充：0 0 20px 30px；
盒影：0 0 5px 5px#c4c4；
}
p{
字体系列：“Eras ITC”；
颜色：#e792b5；
字体大小：20px；
字体大小：正常；
}
.飞行按钮{
位置：固定；
右：18px；
顶部：80px；
高度：50px；
宽度：100px；
背景：#293e6a；
边界半径：25px 0 0 25px；
边界：无；
颜色：#F2F2；
光标：指针；
}
.flyingButton:悬停{
背景：0193b7；
}
.飞行按钮：聚焦{
大纲：0；
}

---

将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;
  }
}

功能多选项（theSeq、theQues、theChoices、theAns）{
内容+=''+theQues+'
'；
forEach（函数）的选择（每个选择）{
内容+=“
”+每个选项+”
”；
});
内容+='
'；
this.getAnswer=函数（）{
返回影院；
}
}

这就是你的答案函数

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";
    } 
}

函数ShowAllAns（）{
/*突出显示所有正确答案*/
var answers=allQues.map（函数（问题）{
返回问题.getAnswer（）；
})
var question_lists=document.getElementById（“容器”）.getElementsByTagName（“ul”）；
对于（变量i=0；i

用jQuery试试这个：

CSS

HTML

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");
}

var content=”“；
功能多选（theSeq、theQues、theChoices、theAns）{
内容+=''+theQues+'
'；
forEach（函数）的选择（每个选择，索引）{
如果（索引==theAns-1）{
content+='
'+eachChoice+'
'；
}否则{
content+='
'+eachChoice+'
'；
}
});
内容+='
'；
返回内容；
}
变量allQues=[
新的多选题（1，“谁是英国首相？”，[“奥巴马”、“布莱尔”、“布朗”、“卡梅伦”]，4），
新的多选题（2，“巴西的首都是什么？”，[“圣保罗”、“里约热内卢”、“巴西利亚”、“萨尔瓦多”]，3），
新的多选题（3，“谁赢得了2016年法网男子单打冠军？”，[“诺瓦克·德约科维奇”、“安迪·穆雷”、“拉斐尔·纳达尔”]，1）
];
函数ShowAllQues（）{
document.getElementById（“容器”）.innerHTML=content；
}
函数ShowAllAns（）{
$（“.answer”）.addClass（“绿色”）；
}

tl；博士：

• 添加类

• 将

  返回内容

  替换为

  this.answer=theAns

• 创建

  var

  获取

  answerChoicesGroup

  ：

  answerChoicesGroup=document.getElementsByClassName（'answerChoicesGroup'）

• 在

  showAllAns（）

  中插入以下内容：

接下来我做的事情是，在所有的

ul

中添加了一个名为

answerChoicesGroup

的类名，并为此创建了一个变量

在

showAllAns（）

函数中，我迭代了

allQues

，并通过以下方式获得了正确答案：

获取当前答案组。（

var应答组

）

通过从

allQues

获取答案索引，访问正确的无线电输入答案。（

var correctAnswer

）

使用

correctAnswer

执行您想要的任何操作

代码如下：

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

var content=”“；
功能多选（theSeq、theQues、theChoices、theAns）{
content+=''+theQues+'
；
forEach（函数）的选择（每个选择）{
内容+=“
”+每个选项+”
”；
});
内容+='
'；
这个答案=剧院；
}
变量allQues=[
新的多选题（1，“谁是英国首相？”，[“奥巴马”、“布莱尔”、“布朗”、“卡梅伦”]，4），
新的多选题（2，“巴西的首都是什么？”，[“圣保罗”、“里约热内卢”、“巴西利亚”、“萨尔瓦多”]，3），
新的多选题（3，“谁赢得了2016年法网男子单打冠军？”，[“诺瓦克·德约科维奇”、“安迪·穆雷”、“拉斐尔·纳达尔”]，1）
],
answerChoicesGroup=document.getElementsByClassName（'answerChoicesGroup'）；
函数ShowAllQues（）{
document.getElementById（“容器”）.innerHTML=content；
}
功能
<body onload="ShowAllQues();">
   <div id="container">
   </div>
<input type="button" value="Answers" class="flyingButton" onclick="ShowAllAns(); 
return false;">

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");
}

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');
    }
}

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

alert(muiltipleChoiceQuestion.answer) // result: 4