多个按钮使用相同的功能

Question

我有多个按钮，我想在不同的相应输入中增加一个值。我能够让所有按钮工作，但它们只影响第一个输入。我意识到我可以为每个按钮写出三个不同的功能，但我知道有一种方法可以利用一个功能。提前感谢您的帮助！

以下代码供参考：

let submit = document.querySelectorAll(".submit");
let num = document.querySelector(".num");

submit.forEach((btn)=>{
  btn.addEventListener("click", increment);
});

let value = 0;

function increment(){
  value +=1;
  num.value = value;
}

<div class="container">

  <div class="main">

    <button class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"></input>     </div>

    <button class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"></input>     </div>

    <button class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"></input>     </div>

  </div>

</div>

Answer 1

选择next sibling 并选择输入。

const submit = document.querySelectorAll(".submit");

submit.forEach((btn) => {
  btn.addEventListener("click", increment);
});

function increment() {
  const inp = this.nextElementSibling.querySelector("input");
  inp.value = Number(inp.value) + 1;
}

<div class="container">

  <div class="main">

    <button type="button" class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"> </div>

    <button type="button" class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"> </div>


    <button type="button" class="submit">Submit</button>
    <div class="withinDiv"><input type="number" class="num" value="0"> </div>

  </div>

</div>

Answer 2

我就是这样做的-基本上在您的“submit”按钮中创建属性（在本例中为“for”（请参阅​​编辑）），该属性将指向id 的input 要递增.这为您提供了充分的灵活性，无论您拥有什么 html。

编辑

最好使用自定义属性，例如data-for，按钮没有for 属性，如下面的cmets 所示

let submit = document.querySelectorAll(".submit");


submit.forEach((btn)=>{
  btn.addEventListener("click", increment);
});



function increment(ev){
  let targetInputId = ev.target.getAttribute("data-for");
  let targetInput = document.getElementById(targetInputId);
  
  targetInput.value = parseInt(targetInput.value) + 1;
}

<div class="container">

  <div class="main">

    <button data-for="num1" class="submit">Submit</button>
    <div class="withinDiv"><input id="num1" type="number" class="num" value="0"></input>     </div>

    <button data-for="num2" class="submit">Submit</button>
    <div class="withinDiv"><input id="num2" type="number" class="num" value="0"></input>     </div>

    <button data-for="num3" class="submit">Submit</button>
    <div class="withinDiv"><input id="num3" type="number" class="num" value="0"></input>     </div>

  </div>

</div>