Question

（我在javascript中研究原型..）我需要在div上动态添加学生详细信息，并在单击按钮（添加更多）时使用javascript原型继续添加更多内容。

到目前为止，这是我的代码：

Javascript：

function Student(name, age, department) {
    this.name = name;
    this.age = age;
    this.department = department;
}

Student.prototype.addStudent = function() {
    var s1 = new Student();
s1.name = document.getElementById('name').value;
s1.age = document.getElementById('age').value;
s1.department = document.getElementById('department').value;

};

这是我的HTML：

 <!DOCTYPE html>
    <html>
        <head>
            <title>Prototype_Student</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <link rel="stylesheet" href="../css/student_style.css"/>
        </head>
        <body>
            <div>Student List</div>
            Name:<input class="inputFields" id="name"/><br><br>
            Age:<input class="inputFields" id="age"/><br><br>
            Department:<input class="inputFields" id="department"/><br><br>
            <button id="addMore" onclick="addStudent(name, age, department);">Add Student</button>
            <script src="../js/student_main.js"></script>
        </body>
    </html>

我的小提琴：http://jsfiddle.net/2TMuB/

我不知道如何动态创建新学生对象并显示它们。

Answer 1

我认为你不应该扩展学生的原型，这样一个学生的新实例可以创建另一个学生。

我相信你可以创建一个可以添加学生的部门，也可以为所有学生添加一个数组，并在以后根据需要对其进行过滤。

function Student(name, age, department) {
    this.name = name;
    this.age = age;
    this.department = department;
}

var addButton = document.getElementById("addMore");

var allStudents = [];

addButton.addEventListener("click", function (e) {
    var name = document.getElementById("name").value,
        age = document.getElementById("age").value,
        department = document.getElementById("department").value;

    var student = new Student(name, age, department);

    allStudents.push(student);
    console.log(allStudents);

}, false);

Answer 2

不要将addStudent函数设置为原型。

function Student(name, age, department) {
    this.name = name;
    this.age = age;
    this.department = department;
}

Student.prototype.display = function() {
    document.write("Name: " + this.name + ", age:" + this.age + "<br>")
};

function addStudent() {
    var s1 = new Student();
    s1.name = document.getElementById(name);
    s1.age = document.getElementById(age);
    s1.department = document.getElementById(department);
}

Answer 3

如果我们分析您的代码，我们会发现您的想法是一个学生可以添加另一个学生。我认为这是错误的（也许不是）。我认为该系可以增加学生（在我们的生活中更真实）。

所以代码（核心思想）：

var department = function(name){
  this.name = name;
  this.students = [];
}

var student = function(name, dep, age){
  this.name = name;
  this.dep = dep;
  this.age = age;
  // other logic
}

department.prototype.addStudent = function(){
  // logic to get student data ( i write static information, you need write dynamic)
  var name = "asdfasdf",
      age  = 12;
  var n_student = new student(name, this.name, age);
  this.students.push(n_student);
}

如何添加学生：

var it_dep = new department("IT");
it_dep.addStudent();
it_dep.addStudent();

访问部门的学生

for(var i = 0; i < it_dep.students.length; i++){
    document.write("Name: " + it_dep.students[i].name + ", age:" + it_dep.students[i].age + "<br>")
}

您可以分析demo。

使用javascript原型，需要动态添加div onclick

3 个答案: