Question

最终输出：我正在尝试按钮点击添加学生和教师，并单独显示。

我的JS：

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

SchoolAdmission.prototype.display = function() {
    var print = document.createElement("div");
    print.innerHTML = "Name: " + this.name + ", age:" + this.age + ", depart: " + this.department + "<br><br><br>";
    $("button").click(function() {
        if (this.id === "addStudent") {
            document.getElementById('studentList').appendChild(print);
        }
        else {
            document.getElementById('teacherList').appendChild(print);
        }
    });
};
addMember = function addMember() {
    var s1 = new SchoolAdmission();
    s1.name = document.getElementById('name').value;
    s1.age = document.getElementById('age').value;
    s1.department = document.getElementById('department').value;
    s1.display();
};

这是我的小提琴：http://jsfiddle.net/LPu9x/

基本上我正在尝试使用原型。

所以我的问题是：

1）单击“添加学生”或“添加教师”时，数据最终会出错。的（解决）

2）这个程序能否以更有效的方式完成？（使用Prototype）

Answer 1

试试这个

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

SchoolAdmission.prototype.display = function(nameButton) {
    var print = document.createElement("div");
    print.innerHTML = "Name: " + this.name + ", age:" + this.age + ", depart: " + this.department + "<br><br><br>";
    if (nameButton === "addStudent") {
        document.getElementById('studentList').appendChild(print);
    }
    else {
        document.getElementById('teacherList').appendChild(print);
    }
};
addMember = function addMember(e) {
    var s1 = new SchoolAdmission();
    s1.name = document.getElementById('name').value;
    s1.age = document.getElementById('age').value;
    s1.department = document.getElementById('department').value;
    s1.display(e.target.id);
};

 <button id="addStudent" onclick="addMember(event)">Add Student</button>

http://jsfiddle.net/LPu9x/3/

Answer 2

你反对jQuery吗？ FIDDLE

JS

$('#name').focus();

$('#addStudent').click(function(){
    var studentname = $('#name').val();
    var studentage = $('#name').val();
    var dept = $('#name').val();
    $('#studentList').append('<li>' + studentname + '-' + studentage + '-' + dept + '</li>');
    $('input').val('');
});
$('#addTeacher').click(function(){
    var studentname = $('#name').val();
    var studentage = $('#name').val();
    var dept = $('#name').val();
    $('#teacherList').append('<li>' + studentname + '-' + studentage + '-' + dept + '</li>');
    $('input').val('');
});

单击按钮时出现appendChild（）问题

2 个答案: