如何在单击时隐藏表单并显示链接，并在使用 JavaScript 单击表单时隐藏表单并显示链接

Question

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

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

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

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

我认为第 3 点应该有一些计数项目，以查看是否有任何列表正在显示和显示（如果 count = 0，则添加一个列表，如果 count = 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>

Answer 2

您没有更改 onclick 以匹配您的功能。同样在加载时，您需要显示：无您的表单。

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="toggle_visibility('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"  style="display: none;">
        <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="toggle_visibility('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input>
        </div>
      </form>

Answer 3

切换功能有效，但需要更改函数调用。在下面的解决方案中，我将函数的名称更改为 toggleDiv()，现在它在调用时执行。

var d = document;
d.g   = d.getElementById;

spans = d.getElementsByTagName("span");
window.onload = function(){
   spans[1].style.display='none';
   d.forms[0].style.display='none';
};

var clicked = 0;

function toggleDiv(divId1, divId2){
    clicked++;
    
    if( d.g( divId1 ).style.display == 'block'){
        d.g( divId1 ).style.display = 'none';
        d.g( divId2 ).style.display = 'block';
    }
    else
    {	
        d.g( divId2 ).style.display = 'none';
        d.g( divId1 ).style.display = 'block'
    }

    if ( clicked > 0) {
       spans[0].style.display='none';
       spans[1].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">Add a list</i></span>
      <span class="placehoder-link"><i class="fas fa-plus">Add another list</span></i></a>
      <form id="add-list-form">
        <div class="form-inner-container">
        <input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off" onmouseover="this.focus()" onmouseout="this.blur()">
        <input type="submit" value="Add List">
        <input type="button" style="font-style: italic" onclick="toggleDiv('add-list-form', 'show-list-form')" value="Close">
        </div>
      </form>

注意：一行HTML：

<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input>

应作如下修改：

<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');">

没有理由将i 标记与输入按钮一起使用，并且输入标记不需要结束标记。如果您必须有 italics，则可以设置按钮样式并指示斜体字体。由于这是一个关闭按钮，您可能应该在 value 属性中指出这一点。

另外，两个 span 标签有多余的 i 标签，所以代码将它们包裹在链接的文本值周围。

代码使用静态 clicked 变量来控制使用 JavaScript 显示 a 标记的内容。