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

Question

我希望我的代码能够实现以下两个目标：

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

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

3. 链接标签有两个span项目（1.添加列表和2.添加另一个列表），类为'placeholder'，根据是否添加了列表，我希望能够选择其中之一。

我想第三点应该有一个计数项来查看是否有任何列表被显示，并显示（如果计数= 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>

- Joan

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>

- Bibberty

---

他们只需要更改他们的onclick以匹配函数并将表单默认为display:none。不过你的重写确实有效！哈哈。 - IamBatman

@IamBatman 上次我发布了一个修复程序，其中包含HTML中的内联JavaScript调用，结果被人狂喷。:) 你知道怎么回事。 - Bibberty

Answer 2

您没有将onclick更改为与您的函数匹配。此外，在加载时，您需要将表单设置为display: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>

- IamBatman

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');">

没有必要在输入按钮中使用标签，而且输入标签不需要闭合标签。如果你一定要使用斜体，可以为按钮设置样式并指定斜体字体。由于这是一个关闭按钮，你应该在value属性中指示这一点。

此外，两个span标签有多余的标签，所以代码将它们围绕链接文本值进行包装。

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

- slevy1

---

谢谢，@slevy1。这个答案对我来说最好，因为它包括切换span的代码。但是，我不得不将这段代码 spans = d.getElementsByTagName("span"); 更改为这段代码 spans = document.getElementsByClassName("placeholder"); 并在HTML文件中的spans中添加class="placeholder"，以便使其在span链接之间切换。 - Joan