时间戳

首页 > 解决方案 > 如何用按钮控制相关的文本输入元素？

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

问题描述

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

我认为您可以执行以下操作：

    <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。

标签： javascript

解决方案

这在 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>

推荐阅读