Question

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

当我单击id ='show-list-form'的链接时，我想隐藏该链接并显示表单（id ='add-list-item'）。
< / li>
出现表单时，我希望能够单击关闭按钮并隐藏表单并显示链接。
链接标记具有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

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

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标签，并且输入标签不需要结束标签。如果必须使用斜体，则可以设置按钮的样式并指示斜体。由于这是一个“关闭”按钮，因此您可能应该在value属性中进行指示。

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

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

当使用JavaScript单击表单时，如何隐藏表单并显示链接onclick，以及如何隐藏表单并显示链接

3 个答案: