如何在javascript中的多个元素之间选择一个元素

Question

我有 5 个输入和 5 个按钮。我有两个问题

1. 首先，我希望在单击按钮时只显示一个输入。但是 使用我编写的代码，所有输入一起出现
2. 第二件事是，单击每个按钮时，值 按钮里面，这里是一个数字，里面会显示 输入。

   但是使用我编写的代码，通过单击每个按钮，其中的数字不会出现在输入中。

   事实上，通过点击第一个按钮，数字 1 应该显示在 input 1 中。 通过单击第二个按钮，数字 2 将显示在输入 2 中。 通过单击第三个按钮，数字 3 将显示在输入 3. and ....

   在您看来，问题在于编写 JavaScript 代码或 html 的方式？ 你能指导我或给我举个例子吗？

   如果你能指导我，我将不胜感激。

   let myButtons = document.querySelectorAll(".myButton");
   let myInputs =  document.querySelectorAll(".myInput");
   let print = document.querySelectorAll(".myInput > input");
   let close = document.querySelectorAll(".close");
   
   myButtons.forEach(function (buttonSelected, id) {
     buttonSelected.addEventListener("click", function() {
       print.value = id + 1;
       console.log(id + 1);
       for(let j = 0; j < myInputs.length; j ++ ){
           myInputs[j].classList.add("active");
       }
     })
   })
   
   for (let i = 0; i < close.length; i++) {
       close[i].addEventListener("click", function(){
           this.parentNode.classList.remove("active")
       })
   }

   .myInput{
       display: none;
       align-items: center;
       justify-content: space-between;
       padding: 0.5rem 0.75rem;
       width: 10%;
       border-radius: var(--borderRadius20);
       background: rgba(221, 199, 0, 0.2);
       -webkit-margin-end: 1rem;
       margin-inline-end: 1rem;
       margin-bottom: 3rem;
       border-radius: 5px;
   }
   
   .myInput.active{
       display: flex;
   }
     
   .myInput > input{
       width:90%;
       border: none;
       margin-right: 0.5rem;
       border-radius: 5px;
   }
   
   .myInput > .close{
       border: 1px solid blue;
       border-radius: 5px;
       cursor: pointer;
   }
   
   ul{
     display: flex;
     align-items: center;
     border: 1px solid red;
     width: auto;
     margin-top: 1.5rem;
     list-style: none;
   }
   .myButton{
     padding: 1rem;
     background: yellow;
     border-radius: 10px;
     margin-right: 0.5rem;
     cursor: pointer;
     border: 2px solid green;
   }

   <!-- //inputs -->
   <div>
     <div class="myInput">
       <input type="text" value>
       <button class="close">close</button>
     </div>
     <div class="myInput">    
       <input type="text" value>
       <button class="close">close</button>
     </div>
     <div class="myInput">
       <input type="text" value>
       <button class="close">close</button>
     </div>
     <div class="myInput">
       <input type="text" value>
       <button class="close">close</button>
     </div>
     <div class="myInput">
       <input type="text" value>
       <button class="close">close</button>
     </div>
   </div>
   
   <!-- //buttons -->
   <ul>
       <li>
         <button class="myButton">1</button>
       </li>
       <li>
         <button class="myButton">2</button>
       </li>
       <li>
         <button class="myButton">3</button>
       </li>
       <li>
         <button class="myButton">4</button>
       </li>
       <li>
         <button class="myButton">5</button>
       </li>
   </ul>

Answer 1

for(let j = 0; j < myInputs.length; j ++ ){
    myInputs[j].classList.add("active");
}

为什么在这里循环？

Answer 2

小sn-p，这是你想要的吗？

document.querySelectorAll(".myButton").forEach(function(buttonSelected, id) {
  buttonSelected.addEventListener("click", function(e) {
    const nb = e.target.innerHTML;
    hideAll();
    const el = document.querySelector('.input' + nb);
    el.innerHTML = nb;
    el.classList.add('active');
  })
})


function hideAll() {
  document.querySelectorAll('.myInput').forEach(e => {
    e.classList.remove('active');
    e.innerHTML = '';
  })
}

.myInput {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  width: 10%;
  border-radius: var(--borderRadius20);
  background: rgba(221, 199, 0, 0.2);
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
  margin-bottom: 3rem;
  border-radius: 5px;
}

.myInput.active {
  display: flex;
}

.myInput>input {
  width: 90%;
  border: none;
  margin-right: 0.5rem;
  border-radius: 5px;
}

.myInput>.close {
  border: 1px solid blue;
  border-radius: 5px;
  cursor: pointer;
}

ul {
  display: flex;
  align-items: center;
  border: 1px solid red;
  width: auto;
  margin-top: 1.5rem;
  list-style: none;
}

.myButton {
  padding: 1rem;
  background: yellow;
  border-radius: 10px;
  margin-right: 0.5rem;
  cursor: pointer;
  border: 2px solid green;
}

<!-- //inputs -->
<div>
  <div class="myInput input1">
    <input type="text" value>
    <button class="close">close</button>
  </div>
  <div class="myInput input2">
    <input type="text" value>
    <button class="close">close</button>
  </div>
  <div class="myInput input3">
    <input type="text" value>
    <button class="close">close</button>
  </div>
  <div class="myInput input4">
    <input type="text" value>
    <button class="close">close</button>
  </div>
  <div class="myInput input5">
    <input type="text" value>
    <button class="close">close</button>
  </div>
</div>

<!-- //buttons -->
<ul>
  <li>
    <button class="myButton">1</button>
  </li>
  <li>
    <button class="myButton">2</button>
  </li>
  <li>
    <button class="myButton">3</button>
  </li>
  <li>
    <button class="myButton">4</button>
  </li>
  <li>
    <button class="myButton">5</button>
  </li>
</ul>

Answer 3

您的 JS 代码中有一些错误。需要指出的一些事情：

• 您的变量print 正在选择所有输入，因此它是一个需要索引的节点列表。这就是为什么我将它重命名为 prints 并为其添加了一个 id 索引。
• 您在每次单击按钮时无缘无故地循环，这就是所有输入都被显示的原因。我删除你的循环。

let myButtons = document.querySelectorAll(".myButton");
let myInputs = document.querySelectorAll(".myInput");
let prints = document.querySelectorAll(".myInput > input");
let close = document.querySelectorAll(".close");

myButtons.forEach(function(buttonSelected, id) {
  buttonSelected.addEventListener("click", function() {
    prints[id].value = id + 1;
    console.log(id + 1);
    myInputs[id].classList.add("active");
  })
})

for (let i = 0; i < close.length; i++) {
  close[i].addEventListener("click", function() {
    this.parentNode.classList.remove("active")
  })
}

.myInput {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  width: 10%;
  border-radius: var(--borderRadius20);
  background: rgba(221, 199, 0, 0.2);
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
  margin-bottom: 3rem;
  border-radius: 5px;
}

.myInput.active {
  display: flex;
}

.myInput>input {
  width: 90%;
  border: none;
  margin-right: 0.5rem;
  border-radius: 5px;
}

.myInput>.close {
  border: 1px solid blue;
  border-radius: 5px;
  cursor: pointer;
}

ul {
  display: flex;
  align-items: center;
  border: 1px solid red;
  width: auto;
  margin-top: 1.5rem;
  list-style: none;
}

.myButton {
  padding: 1rem;
  background: yellow;
  border-radius: 10px;
  margin-right: 0.5rem;
  cursor: pointer;
  border: 2px solid green;
}

<!-- //inputs -->
<div>
  <div class="myInput">
    <input type="text" value>
    <button class="close">close</button>
  </div>
  <div class="myInput">
    <input type="text" value>
    <button class="close">close</button>
  </div>
  <div class="myInput">
    <input type="text" value>
    <button class="close">close</button>
  </div>
  <div class="myInput">
    <input type="text" value>
    <button class="close">close</button>
  </div>
  <div class="myInput">
    <input type="text" value>
    <button class="close">close</button>
  </div>
</div>

<!-- //buttons -->
<ul>
  <li>
    <button class="myButton">1</button>
  </li>
  <li>
    <button class="myButton">2</button>
  </li>
  <li>
    <button class="myButton">3</button>
  </li>
  <li>
    <button class="myButton">4</button>
  </li>
  <li>
    <button class="myButton">5</button>
  </li>
</ul>