javascript - 如何在打开新表单时仅使用 vanilla JavaScript 关闭其他表单？

标签 javascript html css

尝试克隆 Trello。

但是，我遇到了一些问题。我希望能够仅打开 1 个表单并在该表单打开时隐藏/关闭所有其他表单。

问题:如果您创建另一个列表并单击“添加卡片”链接，即使第一个表单仍在显示，也会出现另一个表单。我希望第一种形式在第二种形式出现时消失。 代码笔链接:https://codepen.io/Joanc/pen/EGwqJY 

// *************** ADD LISTS ***************

// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);

//Declaring index
let listIndex = 0;
let countCard = 0;
function addList(e) {
  e.preventDefault();
  const input = document.getElementById("list-name");
  const name = input.value;
  input.value = '';
  if ('' == name) {
    return; 
  }

  const list = document.createElement('div');
  list.setAttribute('class', 'list');
  list.innerHTML =
    `<div class="list-container">
    <div class="list-heading" >
      <h3 contenteditable="true">` + name + `</h3>
    <div class= "ellipsis"><a href="#">&#8230;</a></div>
    </div>
      <div> 
      <div class="link-wrapper">
      <a href="#" class="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);">
      <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
      <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
    </a>
    </div>
        <form class="add-item-form">
          <textarea placeholder="Enter a title for this card..."></textarea>
          <div>
          <input type="submit" value="Add Card">
          <input type="button" value="&#88;" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);">
          <div class= "ellipsis"><a href="#">&#8230;</a></div>
          </div>
        </form>
      </div>
      </div>`;
  
  //Increasing index
  listIndex++
  document.getElementById("list-wrapper").appendChild(list);
}

// add new item submit eventlistener
document.addEventListener('submit', function(e) {
  if (e.target.matches('.add-item-form')) {
    e.preventDefault();
    const textarea = e.target.getElementsByTagName('textarea')[0];
    const text = textarea.value;
    textarea.value = '';
    if ('' == text) {
      return;
    }
    //create card
    const cardItem = document.createElement('p');
    const card = document.createElement('div');
    card.setAttribute('class', 'card');
    //create pen icon
    const pen = document.createElement('a');
    pen.innerHTML = '<i class="fas fa-pen"></i>';
    cardItem.innerHTML = text;
    card.appendChild(cardItem)
    card.appendChild(pen);
    e.target.parentElement.prepend(card);
    countCard++;
   // console.log(countCard);
  }
});

let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
   spans[1].style.display='none';
   document.forms[0].style.display='none';
};

let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
  clicked++;
  if(document.getElementById( formId ).style.display == 'block'){
    document.getElementById( formId ).style.display = 'none';
    document.getElementById( linkId ).style.display = 'block';
  }else{	
    document.getElementById( linkId ).style.display = 'none';
    document.getElementById( formId ).style.display = 'block'
  }if(clicked > 0) {
    spans[0].style.display='none';
    spans[1].style.display='block';
    // console.log(listCount + "lists");
  }
}

document.getElementsByClassName('')

//toggle between links and 'add-list-form'
function hideSHowForm(form, link, id){
 if(document.getElementsByClassName(form)[id].style.display == 'block'){
    document.getElementsByClassName(form)[id].style.display = 'none';
    document.getElementsByClassName(link)[id].style.display = 'block';
  }else{	
    document.getElementsByClassName(link)[id].style.display = 'none';
    document.getElementsByClassName(form)[id].style.display = 'block'
  }if(countCard > 0) {
    spans[0].style.display='none';
    spans[1].style.display='block';
    // console.log(countCard + " cards");
  }
}
/*************** ADD LISTS ***************/

.work-board {
  background-color: transparent;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
}

#list-wrapper {
  margin: 8px 5px 10px 0px;
  padding: 2px;
  border-radius: 4px;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: row;
}

.list {
  background: transparent;
}

.list-container {
  padding: 4px 8px;
  border-radius: 4px;
  width: 256px;
  background-color: rgb(226,228,230);
  border: none;
  margin: 2px 5px;
}

.list-heading {
  display: flex;
  flex-direction: row;
  padding-bottom: 3px;
  margin-bottom: 5px;
}

.list .list-heading h3 {
  margin: 2px 3px 0px 0px;
  width: 82%;
  border-radius: 4px;
  outline:none;
  font-size: 14px;
  font-weight: 600;
  padding: 5px;
}

.list .list-heading h3:focus{
  border: solid 2px   rgb(91,164,207);
  background-color: rgb(255, 255, 255);
}

.ellipsis {
  /* display: inline-block; */
  width: 30px;
  text-align: center;
  border-radius: 4px;
  margin: 0px 1px 0px 0px;
  padding: 0px;
  float: right;
}

.ellipsis:hover {
  background-color: rgba(131, 140, 145, 0.2)
}

form.add-item-form .ellipsis{
  margin-top: 5px;
  padding-bottom: 5px;
}

a {
  text-decoration: none;
  color: rgb(131, 140, 145);
  font-size: 19px;
  vertical-align:middle;
  /* line-height:3px;  */
  text-align:center;
}

form#add-list-form { 
  margin-top: 12px;
  width: 270px;
}

.form-inner-container {
  background-color: rgb(226,228,230);
  padding: 5px 5px 0px 5px;
  border-radius: 4px;
}

input[type=text] {
  height: 32px;
  display: block;
  border-radius: 4px;
  border: solid 1px   rgb(91,164,207);
  width: 247px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 0 0 1px   rgb(91,164,207);
  word-wrap: break-word;
  overflow: hidden;
  color: rgb(131, 140, 145);
  padding-left: 10px;
}

input[type=submit] {
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  padding: 8px 13px;
  background-color: rgb(90, 172, 68);
  box-shadow: 0 1px 0 0 rgb(63, 111, 33);
  border: none;
  border-radius: 4px;
  margin: 10px 0;
}

input[type=submit]:hover {
  background-color: rgb(71, 138, 53);
}

input[type=button]{
  margin-right: -5px;
  border: none;
  background-color: transparent;
  font-size: 18px;
  font-weight: 500;
  color: rgb(131, 140, 145);
}

input[type=button]:hover{
  color: rgb(103,109,112);
}

form.add-item-form {
  margin-top: 20px;
}

form.add-item-form textarea {
  outline: none;
  width: 92%;
  height: 50px;
  max-height: 120px;
  padding: 10px;
  font-size: 14px;
  box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
  border: none;
  border-radius: 3px;
  display: block;
  word-wrap: break-word;
  resize: none;
  margin-top: -5px;
}

.card {
  width: 92%;
  box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
  border: none;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  min-height: 18px;
  word-wrap: break-word;
  padding: 0px 10px;
  margin-top: 9px;
  display: flex;
  flex-direction: row;
  position: relative;
}
.card:hover {
  background-color: rgba(248,249,249,0.7);
}
.card p{
  position: relative;
  padding: 0px;
  margin: 6px 0;
  font-size: 14px;
  z-index: 1;
}

.card a{
  position: absolute;
  margin-left: 220px;
  z-index: 2;
}

.fa-pen {
  font-size: 10px;
  margin: 0;
  padding: 7px;
  border-radius: 4px;
}
.fa-pen:hover {
  background-color: rgb(226,228,230);
}

#add-list-form, .add-item-form {
  display: none;
}

.link-wrapper {
  display: inline-block;
  margin-top: 20px;
}

a#show-list-form {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: rgba(1, 1, 1, 0.3);
  padding: 10px 15px 10px 20px;
  width: 242px;
  text-align: left;
  border-radius: 4px;
  font-size: 14px;
  height: 17px;
}

a#show-list-form:hover {
  background-color: rgba(1, 1, 1, 0.4);
}

a#show-list-form span:first-child {
  padding-right: 172px;
}

a#show-list-form span:nth-child(2), a.show-card-form span:nth-child(2){
  display: none;   /* hides the 'Add another link' when window loads */
} 

/* ,  */
<div class="board-wrapper">
    <div id="workBoard" class="work-board">
      <div id="list-wrapper"></div>
      <div class="link-wrapper">
        <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
        <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
        <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
      </a>
      </div>
      <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> -->
        <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="&#88;">
      </div>
      </form>
    </div>
  </div><!-- end of board-wrapper -->

事情是这样的: 在第一张图片中，当我点击Add card 按钮时，所有的表格都可以打开。 enter image description here

相反，应该发生的情况如下面的屏幕截图所示。当一个 Add card 表单打开时，所有其他 Add card 表单都会关闭或隐藏。 enter image description here

注意: 我指的是具有 class ="add-item-form" 的表单，而不是具有 的表单class ="add-list-form"(灰色背景)。

最佳答案

您可以将this 对象传递给hideSHowForm()，这样您就可以只显示当前传递的元素的祖父元素并隐藏所有其他元素。修改代码如下:

onclick="hideSHowForm(this,'add-item-form', 'show-card-form', ` + listIndex + `);"

和

function hideSHowForm(curr, form, link, id){
  var allCard = document.querySelectorAll('.add-item-form');
  allCard.forEach(el => el.style.display = 'none');
  document.querySelectorAll('.show-card-form').forEach(a =>a.style.display = 'block');
  curr.parentNode.parentNode.style.display = 'block';
  ---------
  ---------


// *************** ADD LISTS ***************

// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);

//Declaring index
let listIndex = 0;
let countCard = 0;
function addList(e) {
  e.preventDefault();
  const input = document.getElementById("list-name");
  const name = input.value;
  input.value = '';
  if ('' == name) {
    return; 
  }

  const list = document.createElement('div');
  list.setAttribute('class', 'list');
  list.innerHTML =
    `<div class="list-container">
    <div class="list-heading" >
      <h3 contenteditable="true">` + name + `</h3>
    <div class= "ellipsis"><a href="#">&#8230;</a></div>
    </div>
      <div> 
      <div class="link-wrapper">
      <a href="#" class="show-card-form" onclick="hideSHowForm(this,'add-item-form', 'show-card-form', ` + listIndex + `);">
      <span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
      <span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
    </a>
    </div>
        <form class="add-item-form">
          <textarea placeholder="Enter a title for this card..."></textarea>
          <div>
          <input type="submit" value="Add Card">
          <input type="button" value="&#88;" onclick="hideSHowForm(this,'add-item-form', 'show-card-form', ` + listIndex + `);">
          <div class= "ellipsis"><a href="#">&#8230;</a></div>
          </div>
        </form>
      </div>
      </div>`;
  
  //Increasing index
  listIndex++
  document.getElementById("list-wrapper").appendChild(list);
}

// add new item submit eventlistener
document.addEventListener('submit', function(e) {
  if (e.target.matches('.add-item-form')) {
    e.preventDefault();
    const textarea = e.target.getElementsByTagName('textarea')[0];
    const text = textarea.value;
    textarea.value = '';
    if ('' == text) {
      return;
    }
    //create card
    const cardItem = document.createElement('p');
    const card = document.createElement('div');
    card.setAttribute('class', 'card');
    //create pen icon
    const pen = document.createElement('a');
    pen.innerHTML = '<i class="fas fa-pen"></i>';
    cardItem.innerHTML = text;
    card.appendChild(cardItem)
    card.appendChild(pen);
    e.target.parentElement.prepend(card);
    countCard++;
   // console.log(countCard);
  }
});

let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
   spans[1].style.display='none';
   document.forms[0].style.display='none';
};

let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
  clicked++;
  if(document.getElementById( formId ).style.display == 'block'){
    document.getElementById( formId ).style.display = 'none';
    document.getElementById( linkId ).style.display = 'block';
  }else{	
    document.getElementById( linkId ).style.display = 'none';
    document.getElementById( formId ).style.display = 'block'
  }if(clicked > 0) {
    spans[0].style.display='none';
    spans[1].style.display='block';
    // console.log(listCount + "lists");
  }
}

document.getElementsByClassName('')

//toggle between links and 'add-list-form'
function hideSHowForm(curr, form, link, id){

  var allCard = document.querySelectorAll('.add-item-form');
  allCard.forEach(el => el.style.display = 'none');
  document.querySelectorAll('.show-card-form').forEach(a =>a.style.display = 'block');
  curr.parentNode.parentNode.style.display = 'block';

 if(document.getElementsByClassName(form)[id].style.display == 'block'){
    document.getElementsByClassName(form)[id].style.display = 'none';
    document.getElementsByClassName(link)[id].style.display = 'block';
  }else{	
    document.getElementsByClassName(link)[id].style.display = 'none';
    document.getElementsByClassName(form)[id].style.display = 'block'
  }if(countCard > 0) {
    spans[0].style.display='none';
    spans[1].style.display='block';
    // console.log(countCard + " cards");
  }
}
/*************** ADD LISTS ***************/

.work-board {
  background-color: transparent;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
}

#list-wrapper {
  margin: 8px 5px 10px 0px;
  padding: 2px;
  border-radius: 4px;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: row;
}

.list {
  background: transparent;
}

.list-container {
  padding: 4px 8px;
  border-radius: 4px;
  width: 256px;
  background-color: rgb(226,228,230);
  border: none;
  margin: 2px 5px;
}

.list-heading {
  display: flex;
  flex-direction: row;
  padding-bottom: 3px;
  margin-bottom: 5px;
}

.list .list-heading h3 {
  margin: 2px 3px 0px 0px;
  width: 82%;
  border-radius: 4px;
  outline:none;
  font-size: 14px;
  font-weight: 600;
  padding: 5px;
}

.list .list-heading h3:focus{
  border: solid 2px   rgb(91,164,207);
  background-color: rgb(255, 255, 255);
}

.ellipsis {
  /* display: inline-block; */
  width: 30px;
  text-align: center;
  border-radius: 4px;
  margin: 0px 1px 0px 0px;
  padding: 0px;
  float: right;
}

.ellipsis:hover {
  background-color: rgba(131, 140, 145, 0.2)
}

form.add-item-form .ellipsis{
  margin-top: 5px;
  padding-bottom: 5px;
}

a {
  text-decoration: none;
  color: rgb(131, 140, 145);
  font-size: 19px;
  vertical-align:middle;
  /* line-height:3px;  */
  text-align:center;
}

form#add-list-form { 
  margin-top: 12px;
  width: 270px;
}

.form-inner-container {
  background-color: rgb(226,228,230);
  padding: 5px 5px 0px 5px;
  border-radius: 4px;
}

input[type=text] {
  height: 32px;
  display: block;
  border-radius: 4px;
  border: solid 1px   rgb(91,164,207);
  width: 247px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 0 0 1px   rgb(91,164,207);
  word-wrap: break-word;
  overflow: hidden;
  color: rgb(131, 140, 145);
  padding-left: 10px;
}

input[type=submit] {
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  padding: 8px 13px;
  background-color: rgb(90, 172, 68);
  box-shadow: 0 1px 0 0 rgb(63, 111, 33);
  border: none;
  border-radius: 4px;
  margin: 10px 0;
}

input[type=submit]:hover {
  background-color: rgb(71, 138, 53);
}

input[type=button]{
  margin-right: -5px;
  border: none;
  background-color: transparent;
  font-size: 18px;
  font-weight: 500;
  color: rgb(131, 140, 145);
}

input[type=button]:hover{
  color: rgb(103,109,112);
}

form.add-item-form {
  margin-top: 20px;
}

form.add-item-form textarea {
  outline: none;
  width: 92%;
  height: 50px;
  max-height: 120px;
  padding: 10px;
  font-size: 14px;
  box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
  border: none;
  border-radius: 3px;
  display: block;
  word-wrap: break-word;
  resize: none;
  margin-top: -5px;
}

.card {
  width: 92%;
  box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
  border: none;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  min-height: 18px;
  word-wrap: break-word;
  padding: 0px 10px;
  margin-top: 9px;
  display: flex;
  flex-direction: row;
  position: relative;
}
.card:hover {
  background-color: rgba(248,249,249,0.7);
}
.card p{
  position: relative;
  padding: 0px;
  margin: 6px 0;
  font-size: 14px;
  z-index: 1;
}

.card a{
  position: absolute;
  margin-left: 220px;
  z-index: 2;
}

.fa-pen {
  font-size: 10px;
  margin: 0;
  padding: 7px;
  border-radius: 4px;
}
.fa-pen:hover {
  background-color: rgb(226,228,230);
}

#add-list-form, .add-item-form {
  display: none;
}

.link-wrapper {
  display: inline-block;
  margin-top: 20px;
}

a#show-list-form {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: rgba(1, 1, 1, 0.3);
  padding: 10px 15px 10px 20px;
  width: 242px;
  text-align: left;
  border-radius: 4px;
  font-size: 14px;
  height: 17px;
}

a#show-list-form:hover {
  background-color: rgba(1, 1, 1, 0.4);
}

a#show-list-form span:first-child {
  padding-right: 172px;
}

a#show-list-form span:nth-child(2), a.show-card-form span:nth-child(2){
  display: none;   /* hides the 'Add another link' when window loads */
} 
<div class="board-wrapper">
    <div id="workBoard" class="work-board">
      <div id="list-wrapper"></div>
      <div class="link-wrapper">
        <a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
        <span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
        <span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
      </a>
      </div>
      <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> -->
        <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="&#88;">
      </div>
      </form>
    </div>
  </div><!-- end of board-wrapper -->

关于javascript - 如何在打开新表单时仅使用 vanilla JavaScript 关闭其他表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53975757/

上一篇：javascript - 应用悬停鼠标时 Accordion 不会停止

下一篇：javascript - 每次触发 'sessionStorage.fgattempt' 或 'fgMade()' 时，如何增加 'threeMade()' 的值？

相关文章：

html - 将下拉菜单的边从右更改为左

javascript - 为 html 中的按钮添加声音

javascript - 如何在Javascript中动态制作按钮

html - CSS 无法识别输入框？

javascript - 如何缓解 Node.js 中的 Slowloris？

javascript - 如何正确使用正则表达式

javascript - 使用具有特定类名的 jquery 在上下文中查找父元素

javascript - 检测此页面是否在跨域 iframe 中的万无一失的方法

jquery - 我想摆脱这个 magnifico 弹出 jquery 效果

html - 有什么好的方法可以同时缩小 CSS/HTML 吗？

©2024 IT工具网  联系我们