javascript - 如何从构造函数返回单个数组项

我要解决的问题是如何将选项数组作为一组或单选按钮打印到HTML中；或将数组a_options[ ]中的每个项目分别传递到HTML中已经存在的单选按钮。

我知道answer1.display(a_option[0]);不会产生任何结果，因为a_option[ ]不是display中定义的变量。

关于如何执行此操作的任何想法还是可行的？

感谢您的提示和想法！

// My constructor function & class 'Questions'
var Questions = function(q_text)
{
    this.q_text = q_text;
};

// My function for displaying the key-value pair 'q_text' in     'Questions' class.
Questions.prototype.displayQ = function()
{
    return this.q_text;
};

// My newObj created from class 'Questions'.
var question1 = new Questions("Who is the winningest coach at KU?");
// question1 has taken on the protoype of 'q_text'
// Displays the key-value pair 'q_text' where 'q_text' has taken on the value
// passed through the constructor function 'Questions'.
question1.displayQ();



//#######################



// My constructor function & class 'Answers'
var Answers = function(a_options, a_facts, a_img, answer)
{
    this.a_options = a_options;
    this.a_facts = a_facts;
    this.a_img = a_img;
    this.answer = answer;
};

// My function for displaying the key-value pair 'a_options' in 'Answers' class.
Answers.prototype.displayA = function()
{
    return this.a_options;
    // return this.a_facts;
    // return this.a_img;
    // return this.answer;
};

// My newObj created from class 'Answers'
var answer1 = new Answers(['Bill Self', 'Phog Allen', 'Larry Brown', 'James Naismith', 'Roy Williams'], "Bill Self is 372-82 (.822) during his 14 years at the helm of Kansas.", "img/self.jpg", "Bill Self");
// question1 has taken on the protoype of 'a_options'
// Displays the key-value pair 'a_options' where 'a_options' has taken on the value
// passed through the constructor function 'Answers'.
answer1.displayA();

最佳答案

我要解决的问题是如何将选项数组作为一组或单选按钮打印到HTML中； ...

您的displayA构造函数的Answers方法以array的形式返回答案，因此在调用displayA之后，您可以遍历数组并在循环内创建单选按钮元素并将其添加到元素中，例如。

var answers = answer1.displayA();
var answersLen = answers.length
for(var i = 0; i < answersLen; i++) {
  var elem = document.createElement('input');
  elem.type = "radio";
  elem.name = "option";
  elem.value = answers[i];
  elem.id = answers[i];
  document.body.appendChild(elem);
}

建议将displayA的名称更改为getOptions，因为displayA不显示任何内容，答案实际上是选项，因为如果我没记错的话，对这个问题只有一个正确的答案。

您也可以使用Array.prototype.forEach()方法循环遍历数组并创建您的单选输入元素。

answer1.displayA().forEach(function(o) {
  var option = '<br /><input type="radio" name="option" value="'+o+'" id="'+o+'" />'
  + '<lable for"'+o+'">'+o+'</label>';
  document.body.innerHTML += option;
})

另一个选择是立即在displayA方法中实际呈现所有内容，并可能添加一个form元素或将一个元素作为容器添加到该方法中，以将元素附加到该容器中。也许是这样。

Answers.prototype.displayA = function(context, formId) {
  var form = document.createElement('form');
  var facts = document.createElement('p');
  var img = document.createElement('img');

  form.id = formId;
  facts.textContent = this.a_facts;
  img.src =  this.a_img
  form.appendChild(facts);
  form.appendChild(img);

  this.a_options.forEach(function(s) {
    var elem = '<br /><input type="radio" name="option" value="'+s+'" id="'+s+'" />'
    + '<lable for"'+s+'">'+s+'</label>';
    form.innerHTML += elem;
  });

  context.appendChild(form);
};

然后，您需要像这样调用displayA

answer1.displayA(document.body, "first-question");

您当然可以将任何元素传递给displayA，而不必是主体。

我相信你会明白的。