javascript - 如何隐藏表单并显示链接 onclick 以及隐藏表单并在使用 JavaScript 单击表单时显示链接

Question

我想用我的代码实现两件事

1. 当我点击 id='show-list-form' 的链接时，我想隐藏链接并显示表单(id='add-list-item')。

2. 当表单出现时，我希望能够单击关闭按钮并隐藏表单并显示链接。

3. 链接标记有 2 个跨度项(1. 添加一个列表和 2. 添加另一个列表)，类为“占位符”，我希望能够根据是否添加列表来选择两者之一或不。

我认为第 3 点应该有一些计数项，以查看是否有任何列表正在显示和显示(如果计数 = 0，则添加一个列表，或者如果计数 = 为 1 或更多，则添加另一个列表，但是，我只是不确定如何实现这一目标。下面的代码是我目前所拥有的。非常感谢您的帮助。

function toggle_visibility(divId1, divId2){
	if(document.getElementById(divId1).style.display == 'block'){
    document.getElementById(divId1).style.display = 'none';
    document.getElementById(divId2).style.display = 'block';
	}else{	
	  document.getElementById(divId2).style.display = 'none';
	  document.getElementById(divId1).style.display = 'block'
	}
} 

<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
      <span class="placehoder-link"><i class="fas fa-plus"></i> Add a list</span>
      <span class="placehoder-link"><i class="fas fa-plus"></i> Add another list</span>
      </a>
      <form id="add-list-form">
        <div class="form-inner-container">
        <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
        <input type="submit" value="Add List">
        <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input>
        </div>
      </form>

Answer 1

在这里，使用 EventListener 并以这种方式切换。

// Set up click events
var showList = document.getElementById("show-list-form");
var hideList = document.getElementById("closeForm");
var formElement = document.getElementById("add-list-form");

const toggle = (hide, show) => {
  hide.style.display = 'none';
  show.style.display = 'block';
};

showList.addEventListener("click", function(event) {
  toggle(showList, formElement);
});

hideList.addEventListener('click', function(event) {
  toggle(formElement, showList);
});

// Init
toggle(formElement, showList);

<a href="#" id="show-list-form">
  <span class="placehoder-link"><i class="fas fa-plus"></i> Add a list</span>
  <span class="placehoder-link"><i class="fas fa-plus"></i> Add another list</span>
</a>
<form id="add-list-form">
  <div class="form-inner-container">
    <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
    <input type="submit" value="Add List">
    <input id="closeForm" type="button"><i class="fas fa-times"></i></input>
  </div>
</form>