时间戳

首页 > 解决方案 > 在纯 JavaScript 中的 2 个元素之间切换

javascript - 在纯 JavaScript 中的 2 个元素之间切换

问题描述

我正在用纯 JavaScript 编写切换。

有 2 个输入字段，1 个是隐藏的，另一个是可见的。当我们单击第一个 1 时，应出现第二个输入，并且当两个输入字段都可见并且单击其中一个输入字段时，该输入字段应显示：块，而另一个输入字段应显示：无。此外，最近点击的输入元素应保持在顶部，而另一个在其下方。（es6也不错）

如果有人知道请检查？

代码

<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;
}

谢谢！

标签： javascriptecmascript-6

解决方案

你可以像这样继续：

const inputs = [].slice.call(document.getElementsByClassName("input-bg"));
inputs.forEach((input) => {
  console.log()
  input.addEventListener("click", (event) => {
    const somehidden = inputs.filter((_input) => {
      return _input.getAttribute("class").match(/neww1/i);
    })
    if (somehidden.length > 0) {
      somehidden[0].classList.remove("neww1");
    } else {
      inputs.forEach((i) => {
        if (i !== event.target)
          i.classList.add("neww1");
      });

    }
  });
});
body {
  background: #873e66;
}

.grid {
  display: grid;
  grid-template-areas: "up" "down";
}

form:focus-within {
  grid-area: up;
}

.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;
}
<div class="grid">
  <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="Type2 "></form>
</div>

推荐阅读