在纯JavaScript中的2个元素之间切换 [英] A toggle between 2 elements in pure JavaScript

问题描述

我正在用纯JavaScript编写切换.

I am writing a toggle in pure JavaScript.

有2个输入字段，其中1个隐藏，而另一个可见.当我们单击第一个1时，将出现第二个输入，并且当两个输入字段均可见并且单击一个输入字段时，则该输入字段应显示:block，另一个输入字段应显示:none.另外，最后单击的输入元素应保留在顶部，而另一个应保留在其下方. (es6也不错)

There are 2 input fields, 1 is hidden and the other is visible. When we click on the first 1, the second input should appear and when both of the input fields are visible and one of the input fields is clicked then that input field should display:block and the other input field should display:none. Also, the latest clicked input element should remain on top and the other one below it. (es6 would be also good)

如果有人知道，请检查?

if anyone knows please check ?

<form action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww" placeholder="Type "></form>
<form action="#" class="navbar-top" role="search" autocomplete="off"><input name="p" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww1" placeholder="Type "></form>

---

body{
  background:#873e66;
}
.input-bg{
  background:white;
  border:none;
  color:black;
  height:50px;
  text-indent:15px;
  width:500px;
  border-radius:26px;
  outline:none;
}
.neww1{
  margin-top:5px;
}
::-webkit-input-placeholder {
  color: black;
}
::-moz-placeholder {
  color: black;
}
:-ms-input-placeholder {
  color: black;
}
.neww1{
  display:none;
}

---

function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

谢谢！

推荐答案

虽然您的要求不是很明确，但是我的回答可能会有所帮助

假设我们有两个这样的输入字段:

Although your requirement is not very clear but my answer might be of some help

Let's say we have two input fields like this:

<div class="input-container">
  <input type="password" placeholder="Input 1" class="myInput first" />
  <input type="password" placeholder="Input 2" class="myInput second hidden" />
</div>

CSS可以像:

.input-container {
  display: flex;
  flex-direction: column;
}

.myInput {
  margin: 10px;
  padding: 5px
}
.first {
  order: 1;
}
.second {
  order: 2;
}

.hidden {
  display: none;
}

现在启用切换功能(JS):

Now the toggle function (JS):

var allInputs = document.querySelectorAll('.myInput');
allInputs.forEach(function(node) {
    node.addEventListener("click", function(){
      var allHiddenInputs = document.querySelectorAll('.hidden');
      if(allHiddenInputs.length === 0) {
        allInputs.forEach(function(input) {
          input.classList.add("hidden");
          input.classList.add("second");
          input.classList.remove("first");
        });
        node.classList.remove("hidden");
        node.classList.remove("second");
        node.classList.add("first");
      } else {
        allHiddenInputs.forEach(function(input) {
          input.classList.remove("hidden");
        });
      }
    });
});

https://codepen.io/tusharshukla/pen/rrqvQz?editors=1010

这篇关于在纯JavaScript中的2个元素之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！