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中; ...

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方法中的所有内容，并且可以添加表单元素或将元素作为容器传递给方法以将元素追加到。也许是这样。

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

ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
    position: relative;
    li {
        height: auto;
        width: 20%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        a {
            display: block;
            color: white;
            text-align: center;
            padding: 16px;
            text-decoration: none;
        }
    }
    .float-left {
        float: left;
        font: 2em bold sans-serif;
    }
}

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

2 个答案: