javascript - 如何用按钮控制相关的文本输入元素？

Question

我有一个动态呈现的文本字段 + 按钮列表。用户点击按钮，我想在点击按钮时控制输入字段。

我想你可以这样做:

    <input id="1"><button onclick="doSomething(1)">Something</button>
    <input id="2"><button onclick="doSomething(2)">Something</button>
    <!--...-->
    <input id="3"><button onclick="doSomething(3)">Something</button>

但我想知道是否有不同且更复杂的解决方案，因为我正在修改的代码将匿名函数传递给 onclick，而我无法像上面的方法那样传递唯一 ID。

Answer 1

这在 vanilla Javascript 中很容易实现(就像大多数事情一样)。此处不需要 jQuery 开销。

let buttons = [...document.getElementsByClassName('inputbutton')]

function doSomething(i) {
  console.log(i);
}

for (const button of buttons) {
  button.addEventListener('click', (e) => {
    const i = e.target.previousSibling.id
    doSomething(i);
  })
}

<input id="1"><button class="inputbutton" type="button">Something</button>
<input id="2"><button  class="inputbutton" type="button">Something</button>
<!--...-->
<input id="3"><button  class="inputbutton" type="button">Something</button>