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

Question

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

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

关于如何做到这一点的任何想法或可能吗？

感谢您的提示和想法！

// 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();

Answer 1

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

Answers 构造函数的displayA 方法将答案作为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 方法中的所有内容，并可能添加一个表单元素或将一个元素作为容器传递给该方法以将您的元素附加到其中。也许是这样。

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，它不必是正文。

我相信你会明白的。

Answer 2

//JSON (JavaScript Object Notation) Constructor 
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;
};

//Prototype adds a property to an already existing JSON Object
Answers.prototype.displayA = function()
{
    return this.a_options;
    // return this.a_facts;
    // return this.a_img;
    // return this.answer;
};


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

//Calling Answers sets variables on answer1. You can do the same in json
answer2 ={
	a_options : ['Bill Self', 'Phog Allen', 'Larry Brown', 'James Naismith', 'Roy Williams'],
	a_facts : "Bill Self is 372-82 (.822) during his 14 years at the helm of Kansas.",
	a_images : "img/self.jpg",
	answer : "Bill Self",
	displayA : function(){
		return this.a_options;
	}
}

output = '';
//You assigned an array to answer1.a_options. So loop through the array. It is possible with and without the DisplayA prototype
for(i=0;i<answer1.a_options.length;i=i+1)
{
	output = output + '<input type="radio" name="name" value="'+answer1.a_options[i]+'">'+answer1.a_options[i]+'<br>';
}

//It is possible to use the displayA prototype too
for(i=0;i<answer1.displayA().length;i=i+1)
{
	output = output + '<input type="radio" name="name" value="'+answer1.displayA()[i]+'">'+answer1.displayA()[i]+'<br>';
}

//It is also possible using the json method 
for(i=0;i<answer2.a_options.length;i=i+1)
{
	output = output + '<input type="radio" name="name" value="'+answer2.a_options[i]+'">'+answer2.a_options[i]+'<br>';
}

for(i=0;i<answer2.displayA().length;i=i+1)
{
	output = output + '<input type="radio" name="name" value="'+answer2.displayA()[i]+'">'+answer2.displayA()[i]+'<br>';
}

document.write(output);