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

Question

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

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

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

3. 链接标记有2个span项目（1.添加列表和2.添加另一个列表）和类'placeholder'，我希望能够选择其中一个，具体取决于是否添加了列表。

我认为第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

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

 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; dg = 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( dg( divId1 ).style.display == 'block'){ dg( divId1 ).style.display = 'none'; dg( divId2 ).style.display = 'block'; } else { dg( divId2 ).style.display = 'none'; dg( 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标签与输入按钮一起使用，输入标签不需要结束标签。 如果必须使用斜体 ，则可以设置按钮样式并指示斜体字体。 由于这是一个关闭按钮，您应该在值属性中指明。

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

该代码使用一个静态点击变量来控制的内容的显示a与JavaScript代码。