如何显示/隐藏多个div元素?

我有一些链接,当我单击它们时,我希望它们以一个时隙作为输入,这是使用输入标签和提交按钮来完成的。提交后,我希望显示使用div元素提交的时隙。

最初,我已将该div的可见性设置为隐藏,并且一旦单击“提交”按钮,它应该是可见的,并显示输入的文本。

我可以显示使用div输入的文本,但问题是该文本仅输入一次,如果再次单击该链接以添加另一个时隙,则只会更改已经输入的时隙。

我已经找到了一种方法,该方法将多个具有不同ID的div放在可见的位置,但随后我不得不一次又一次地添加太多隐藏的div和相同的函数,这变得非常繁琐。

请给我建议一个更好的方法。 这是我的星期一时段代码:

我将不得不重复相同的代码和功能一次又一次,我不想这样做。

function f1() {
  document.getElementById("a1").style.visibility = "visible";
  document.getElementById("b1").style.visibility = "visible";
}

function f2() {
  document.getElementById("b1").style.visibility = "hidden";
  document.getElementById("a2").innerHTML += document.getElementById("a1").value;
  document.getElementById("a2").style.display = "block";
  document.getElementById("a1").style.visibility = "hidden";


}

function f3() {
  document.getElementById("a2").style.display = "none";
  document.getElementById("i1").style.visibility = "hidden";

}
<h4>Monday</h4>

<input id="a1" style="visibility: hidden;" placeholder="enter time slot"></input><button id="b1" type="submit" onclick="f2()" style="visibility: hidden;">Submit</button>
<div id="a2" class="vi" style="display:none;background-color:#94DCE5 ;width: 172px;"><img src="assets/close.png" id="i1" onclick="f3()" /></div><br>
<a href="#" onclick="f1()">Add new session</a>
评论