纯JavaScript中两个元素之间的切换_Javascript_Ecmascript 6

纯JavaScript中两个元素之间的切换

javascript ecmascript-6

纯JavaScript中两个元素之间的切换,javascript,ecmascript-6,Javascript,Ecmascript 6,我正在用纯JavaScript编写一个切换有两个输入字段，一个隐藏，另一个可见。当我们单击第一个1时，第二个输入应该出现，当两个输入字段都可见并且单击其中一个输入字段时，该输入字段应该显示：block，而另一个输入字段应该显示：none。此外，最新单击的输入元素应保持在顶部，另一个位于其下方。（es6也不错）如果有人知道，请查收代码谢谢您的HTML元素具有classList属性。因此，首先需要元素引用，您可以使用构造函数和私有变量，根据页面的初始状态使用document.getE

我正在用纯JavaScript编写一个切换

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

如果有人知道，请查收

代码

谢谢

您的HTML元素具有classList属性。因此，首先需要元素引用，您可以使用构造函数和私有变量，根据页面的初始状态使用document.getElementByClassName设置私有变量，或者设置一个ID。让我们以ID为例：

<form onclick="toggleClass()" id="password1" 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 onclick="toggleClass()" id="password2" 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>

然后，您可以编写以下函数：

function toggleClass() {
  const password1 = document.getElementById("password1");
  const password2 = document.getElementById("password2");
  if (password1.classList.contains('hidden')){
    password1.classList.remove('hidden');
    password2.classList.add('hidden');
  }
  else {
    password2.classList.remove('hidden');
    password1.classList.add('hidden');
  }
}

.neww1 {
  background-color : red;
}
.neww {
  background-color : green;
}
.hidden {
  display:none;
}
input {
  margin:5px;
}

虽然你的要求不是很清楚，但我的回答可能会有所帮助

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

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

现在切换函数（JS）：

您可以像这样继续：

const inputs=[].slice.call（document.getElementsByClassName（“input bg”）；
输入。forEach（（输入）=>{
console.log（）
input.addEventListener（“单击”，（事件）=>{
const somehidden=inputs.filter（_input）=>{
返回_input.getAttribute（“class”）.match（/neww1/i）；
})
如果（somehidden.length>0）{
somehidden[0]。classList.remove（“neww1”）；
}否则{
输入。forEach（（i）=>{
如果（i！==event.target）
i、 添加（“新W1”）；
});
}
});
});
正文{
背景#873e66；
}
.电网{
显示：网格；
网格模板区域：“向上”“向下”；
}
形式：关注内部{
网格区域：向上；
}
.输入背景{
背景：白色；
边界：无；
颜色：黑色；
高度：50px；
文本缩进：15px；
宽度：500px；
边界半径：26px；
大纲：无；
}
.neww1{
边缘顶部：5px；
}
：-webkit输入占位符{
颜色：黑色；
}
：-moz占位符{
颜色：黑色；
}
：-ms输入占位符{
颜色：黑色；
}
.neww1{
显示：无；
}
像这样的东西可以帮助你。我直接更改CSS，但您也可以使用类列表
切换类
 <html>
<body>
    <form action="#" class="navbar-top" role="search" autocomplete="off">
        <input name="p" id="input1" data-hit="Type" type="text" autocomplete="new-password" value="" data-open="false" class="input-bg neww"
            placeholder="Input One ">
    </form>

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


    <script>
        (function () {
            const inputOne = document.getElementById('input1');
            const inputTwo = document.getElementById('input2');

            const handleClick = i => (i === inputOne ? inputTwo : inputOne)
                .style.display = 'none';

            const handleBlur = i => {
                if (i === inputOne) {
                    inputTwo.style.display = 'block';
                    inputOne.style.display = 'none';
                } else {
                    inputTwo.style.display = 'none';
                    inputOne.style.display = 'block';
                }
            }

            [inputOne, inputTwo].forEach((i) => {
                i.addEventListener('click', () => handleClick(i))
                i.addEventListener('focusout', () => handleBlur(i))
            });
        })();
    </script>
</body>
</html>


（功能（）{
const inputOne=document.getElementById（'input1'）；
const inputwo=document.getElementById（'input2'）；
常量handleClick=i=>（i==inputOne？inputwo:inputOne）
.style.display='none'；
常量车把lur=i=>{
如果（i==输入按钮）{
inputwo.style.display='block'；
inputOne.style.display='none'；
}否则{
inputwo.style.display='none'；
inputOne.style.display='block'；
}
}
[inputOne，InputWO].forEach（（i）=>{
i、 addEventListener（'click'，（）=>handleClick（i））
i、 addEventListener（'focusout'，（）=>handleBlur（一））
});
})();
您的问题是什么？你有问题吗？如果有，是什么问题？这与React有什么关系？@Jayce444我想在React组件的一侧添加这个切换条，这就是我选择React的原因。我很抱歉，如果它不相关，我会删除标签。谢谢你的回答，但我在codepen中尝试了此功能，但不起作用。请再次检查，谢谢检查我在回答中提到的codepen链接，并让我知道这是否是你想要的。是的，谢谢，还有一件事是可以做一个小的修改=>当选择输入2时，它应该在第一个，当选择1时，它应该在第一个，现在输入1总是在第一个，通过deaultcheck再次检查codepen链接，让我知道这是否是您想要的，它为您工作。你能把这个答案标记为已接受吗。此外，你可以在vickyddev@gmail.com如果您有任何问题，我将无法立即回复，因为我正在工作，但我肯定会。感谢您的回答，我尝试使用codepen，但它不起作用，并且显示缺少1个括号。我添加了它，然后它也不起作用了，你能在if之后检查一下谢谢@ShiningYes抱歉，我忘了a'）吗。而原因是因为它无法复制过去。现在没事了。切换时，是否可以将当前选定的输入字段始终保持在顶部？是的，您可以使用显示网格css3来执行此操作，我已修改了响应我从另一个答案中获得了此结果，我希望如此感谢您的回答，但当我们单击输入A时，我希望有所收获，输入B应该在它下面，然后当我们单击A或B时，其他输入应该隐藏
const password1 = document.getElementById("password1");
const password2 = document.getElementById("password2");

function toggleClass() {
  const password1 = document.getElementById("password1");
  const password2 = document.getElementById("password2");
  if (password1.classList.contains('hidden')){
    password1.classList.remove('hidden');
    password2.classList.add('hidden');
  }
  else {
    password2.classList.remove('hidden');
    password1.classList.add('hidden');
  }
}

.neww1 {
  background-color : red;
}
.neww {
  background-color : green;
}
.hidden {
  display:none;
}
input {
  margin:5px;
}

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

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

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

.hidden {
  display: none;
}

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

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

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


    <script>
        (function () {
            const inputOne = document.getElementById('input1');
            const inputTwo = document.getElementById('input2');

            const handleClick = i => (i === inputOne ? inputTwo : inputOne)
                .style.display = 'none';

            const handleBlur = i => {
                if (i === inputOne) {
                    inputTwo.style.display = 'block';
                    inputOne.style.display = 'none';
                } else {
                    inputTwo.style.display = 'none';
                    inputOne.style.display = 'block';
                }
            }

            [inputOne, inputTwo].forEach((i) => {
                i.addEventListener('click', () => handleClick(i))
                i.addEventListener('focusout', () => handleBlur(i))
            });
        })();
    </script>
</body>
</html>