javascript - 单击带有 DOM 的按钮时卸载信息 - Javascript

标签 javascript html css dom

我的问题基于上一个问题 generate HTML page using DOM - Javascript基于这个 ìmagein down，我可以用@MasterDJon orientation 解决这个问题，它工作得很好，但还不完整，

因为仍然缺少为 student informaion button 创建事件并且喜欢它工作的脚本和页面，但我需要Unload_Student 当同样是在复选框中选择时查看信息并且我需要返回主页或学校页面当我点击按钮返回到学校页面，如果您不明白我的问题，请尝试运行代码片段以查看结果。

ps: 总结和总结，我只想转到学生页面，然后用按钮事件

返回主页

enter image description here 

var school = new School(1);

function Student(id) {
  this.id = id;
  this.div = null;

  var self = this;
  Unload_Student(this.id);

  function Unload_Student(index) {

    var div = document.createElement("div");
    div.id = "student";

    var h1 = document.createElement("h1");
    h1.style.color = "red";

    var title = document.createTextNode("Student " + index + " informations:");
    h1.appendChild(title);

    var h3 = document.createElement("h3");
    h3.style.color = "blue";

    var subtitle = document.createTextNode("List Of Books:");
    h3.appendChild(subtitle);

    div.appendChild(h1);
    div.appendChild(h3);


    var btnBack = document.createElement("button");
    var btnBackText = document.createTextNode("Return to School Page");
    btnBack.appendChild(btnBackText);
    btnBack.onclick = function() {
      //return to school page
      //but it´s not function
      school.Unload_School();
    }

    div.appendChild(btnBack);

    document.body.appendChild(div);
  };

}


function School(id) {
  this.id = id;
  this.index = 0;
  this.students = {};
  this.studentsList = document.createElement('DIV');

  var self = this;
  Unload_School();

  function Unload_School() {

    var div = document.createElement("div");
    div.id = "school";

    var h1 = document.createElement("h1");
    h1.style.color = "red";

    var title = document.createTextNode("High School");
    h1.appendChild(title);

    var h3 = document.createElement("h3");
    h3.style.color = "blue";

    var subtitle = document.createTextNode("List Of Students:");
    h3.appendChild(subtitle);

    div.appendChild(h1);
    div.appendChild(h3);

    div.appendChild(self.studentsList);


    var btnCreate = document.createElement("button");
    var btnCreateText = document.createTextNode("Create");
    btnCreate.appendChild(btnCreateText);
    btnCreate.onclick = function() {
      school.createStudent();

    }

    var btnRemove = document.createElement("button");
    var btnRemoveText = document.createTextNode("Remove");
    btnRemove.appendChild(btnRemoveText);
    btnRemove.onclick = function() {
      school.removeStudents();
    }


    var btnInf = document.createElement("button");
    var btnInfText = document.createTextNode("Student Information");
    btnInf.appendChild(btnInfText);
    btnInf.onclick = function() {
      school.studentInformations();
    }

    div.appendChild(btnCreate);
    div.appendChild(btnRemove);
    div.appendChild(btnInf);

    document.body.appendChild(div);
  };

}

School.prototype.createStudent = function() {
  this.students[this.index] = new Student(this.index);
  this.showStudent(this.index);
  this.index++;
};

School.prototype.showStudent = function(id) {
  var div = document.createElement('div');
  div["data-id"] = this.students[id].id;

  var chkbox = document.createElement("input");
  chkbox.type = "checkbox";
  chkbox.name = "Student" + this.students[id].id;
  chkbox.id = chkbox.name;
  div.appendChild(chkbox);

  var chkText = document.createTextNode("Student " + this.students[id].id);
  div.appendChild(chkText);

  this.students[id].div = div;
  this.studentsList.appendChild(div);
};

School.prototype.removeStudents = function(id) {
  //this call the function to remove the students
  var totalRemoved = 0;
  for (var studentElementIndex in this.studentsList.childNodes) {
    var studentElement = this.studentsList.childNodes[studentElementIndex - totalRemoved];
    if (studentElement.childNodes[0].checked) {
      this.removeStudent(studentElement['data-id']);
      totalRemoved++;
    }
  }
};

School.prototype.removeStudent = function(id) {
  //this call the function to remove the students
  if (!this.students[id]) return;

  if (this.students[id].div != null)
    this.studentsList.removeChild(this.students[id].div);

  delete this.students[id];
};


School.prototype.studentInformations = function() {
  for (var studentIndex in this.studentsList.childNodes) {
    var studentInf = this.studentsList.childNodes[studentIndex];
    if (studentInf.childNodes[0].checked) {
      this.studentInformation(studentInf['piso-id']);
    }
  }
};


School.prototype.studentInformation = function(id) {
  if (!this.students[id]) {
    return;
  }
  if (this.students[id].div != null) {
    //need to call the UnloadStudent
    this.students[id].Unload_Student(this.students[id].id);

  }
};
#school {
  display: inline-table;
  vertical-align: middle;
  text-align: left;
}
#student {
  display: inline-table;
  vertical-align: middle;
  text-align: left;
}

[id] h1 {
  font-size: 60px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[id] h3 {
  font-size: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[id] button {
  margin: 2px;
  background-color: #0000ff;
  font-size: 14px;
  font-weight: bold;
  color: white;
}
<!DOCTYPE html>
<html lang="pt-PT">

<head>
  <meta charset="UTF-8">
  <title>High School</title>
</head>

<body>
  <div id="school"></div>
</body>

</html>

最佳答案

我找到了解决方案，问题是我调用了 private function在类之外，解决方案是创建 public function调用 private function ，感谢@MasterDJon 的指导，谢谢

var school = new School(1);

function Student(id) {
  this.id = id;
  this.div = null;

  //public function to call private function
  this.showInformation = function() {
    Unload_Student(this.id);
  }

  //private function
  function Unload_Student(index) {

    var div = document.createElement("div");
    div.id = "student";

    var h1 = document.createElement("h1");
    h1.style.color = "red";

    var title = document.createTextNode("Student " + index + " informations:");
    h1.appendChild(title);

    var h3 = document.createElement("h3");
    h3.style.color = "blue";

    var subtitle = document.createTextNode("List Of Books:");
    h3.appendChild(subtitle);

    div.appendChild(h1);
    div.appendChild(h3);


    var btnBack = document.createElement("button");
    var btnBackText = document.createTextNode("Return to School Page");
    btnBack.appendChild(btnBackText);
    btnBack.onclick = function() {
      //call school page to Unloadd_School
      //it´s work
      school.schoolPage();
    }

    div.appendChild(btnBack);

    document.body.appendChild(div);
  };

}


function School(id) {
  this.id = id;
  this.index = 0;
  this.students = {};
  this.studentsList = document.createElement('DIV');
  var self = this;
  Unload_School();

  //public function to call private function
  this.schoolPage = function() {
    Unload_School();
  }

  //private function
  function Unload_School() {

    var div = document.createElement("div");
    div.id = "school";

    var h1 = document.createElement("h1");
    h1.style.color = "red";

    var title = document.createTextNode("High School");
    h1.appendChild(title);

    var h3 = document.createElement("h3");
    h3.style.color = "blue";

    var subtitle = document.createTextNode("List Of Students:");
    h3.appendChild(subtitle);

    div.appendChild(h1);
    div.appendChild(h3);

    div.appendChild(self.studentsList);


    var btnCreate = document.createElement("button");
    var btnCreateText = document.createTextNode("Create");
    btnCreate.appendChild(btnCreateText);
    btnCreate.onclick = function() {
      school.createStudent();

    }

    var btnRemove = document.createElement("button");
    var btnRemoveText = document.createTextNode("Remove");
    btnRemove.appendChild(btnRemoveText);
    btnRemove.onclick = function() {
      school.removeStudents();
    }


    var btnInf = document.createElement("button");
    var btnInfText = document.createTextNode("Student Information");
    btnInf.appendChild(btnInfText);
    btnInf.onclick = function() {
      school.studentInformations();
    }

    div.appendChild(btnCreate);
    div.appendChild(btnRemove);
    div.appendChild(btnInf);

    document.body.appendChild(div);
  };

}

School.prototype.createStudent = function() {
  this.students[this.index] = new Student(this.index);
  this.showStudent(this.index);
  this.index++;
};

School.prototype.showStudent = function(id) {
  var div = document.createElement('div');
  div["data-id"] = this.students[id].id;

  var chkbox = document.createElement("input");
  chkbox.type = "checkbox";
  chkbox.name = "Student" + this.students[id].id;
  chkbox.id = chkbox.name;
  div.appendChild(chkbox);

  var chkText = document.createTextNode("Student " + this.students[id].id);
  div.appendChild(chkText);

  this.students[id].div = div;
  this.studentsList.appendChild(div);
};

School.prototype.removeStudents = function(id) {
  //this call the function to remove the students
  var totalRemoved = 0;
  for (var studentElementIndex in this.studentsList.childNodes) {
    var studentElement = this.studentsList.childNodes[studentElementIndex - totalRemoved];
    if (studentElement.childNodes[0].checked) {
      this.removeStudent(studentElement['data-id']);
      totalRemoved++;
    }
  }
};

School.prototype.removeStudent = function(id) {
  //this call the function to remove the students
  if (!this.students[id]) return;

  if (this.students[id].div != null)
    this.studentsList.removeChild(this.students[id].div);

  delete this.students[id];
};


School.prototype.studentInformations = function() {
  for (var studentIndex in this.studentsList.childNodes) {
    var studentInf = this.studentsList.childNodes[studentIndex];
    if (studentInf.childNodes[0].checked) {
      this.studentInformation(studentInf['data-id']);
    }
  }
};


School.prototype.studentInformation = function(id) {
  if (!this.students[id]) {
    return;
  }
  if (this.students[id].div != null) {
    // call the showInformation to Unload_Students
    //it´s work
    this.students[id].showInformation();

  }
};
#school {
  display: inline-table;
  vertical-align: middle;
  text-align: left;
}

#student {
  display: inline-table;
  vertical-align: middle;
  text-align: left;
}

[id] h1 {
  font-size: 60px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[id] h3 {
  font-size: 40px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[id] button {
  margin: 2px;
  background-color: #0000ff;
  font-size: 14px;
  font-weight: bold;
  color: white;
}
<!DOCTYPE html>
<html lang="pt-PT">

<head>
  <meta charset="UTF-8">
  <title>High School</title>
</head>

<body>
  <div id="school"></div>
</body>

</html>

关于javascript - 单击带有 DOM 的按钮时卸载信息 - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37124741/

上一篇：html - 用CSS居中一个div

下一篇：css - 使用 GSAP 以倾斜 Angular 围绕 Y 轴旋转 Div

相关文章：

javascript - 使用 Ajax 插入成功但数据库行为空

javascript - 更改现场只有一个自动完成的样式

javascript - 带有不同图像的 JavaScript 表格

javascript - 添加选中的单选按钮的总数

javascript - 滚动时 Angular 5 粘性菜单

android - CSS 不适用于 WebView.loadDataWithBaseURL

javascript - Canvas 使用键盘输入移动，但图像不移动

php - 在每页中打印页眉

javascript - 在没有 combineLatest 的情况下从另一个可观察对象获取值(value)的最佳方法

javascript - 使用javascript绘制笑脸并在半透明div中显示

©2024 IT工具网  联系我们