Javascript 多个计数器使用相同的类名（querySelectorAll），但输入字段的ID不同_Javascript

Javascript 多个计数器使用相同的类名（querySelectorAll），但输入字段的ID不同

javascript

Javascript 多个计数器使用相同的类名（querySelectorAll），但输入字段的ID不同,javascript,Javascript,对于这个示例，我希望有2个或更多可重用的增量计数器每个集装箱将有：具有相同类名的增量按钮：.increment 具有相同类名.number但ID不同（#speed和#km）的输入字段，用于使用不同的步长和值属性更新其值。这可能与这个.id有关，但我没有看到它期望：单击所选事件侦听器（增量按钮）时，它将更新来自该容器的输入值我使用forEach包装器获取所有增量类名：getIncrements.forEach（（getIncrement），但我不知道如何根据单击的按钮选择和更改输

对于这个示例，我希望有2个或更多可重用的增量计数器

每个集装箱将有：

具有相同类名的增量按钮：
```
.increment
```
具有相同类名
```
.number
```
但ID不同（
```
#speed
```
和
```
#km
```
）的输入字段，用于使用不同的步长和值属性更新其值。这可能与
```
这个.id有关，但我没有看到它
```


期望：

单击所选事件侦听器（增量按钮）时，它将更新来自该容器的输入值

我使用forEach包装器获取所有增量类名：getIncrements.forEach（（getIncrement）
，但我不知道如何根据单击的按钮选择和更改输入值

const getIncrements=document.querySelectorAll（'.increments'）；
const getValue=document.querySelector（'.number'）；
getIncrements.forEach（（getIncrements）=>{
getIncrement.addEventListener（'单击'，（）=>{
getValue.steppup（1）；
})
})；
Chrome、Safari、Edge、Opera*/
输入：：-webkit外部旋转按钮，
输入：：-webkit内部旋转按钮{
-webkit外观：无；
保证金：0；
}
/*火狐*/
输入[类型=数字]{
-moz外观：textfield；
}
.flex{
显示器：flex；
边缘顶部：10px；
}

+
+

改用

querySelector

，因为在您的情况下，您总是使用第一个输入

const getIncrements=document.queryselectoral（“.increments”）；
getIncrements.forEach（getIncrements=>{
getIncrement.addEventListener（“单击”，（）=>{
getIncrement.nextElementSibling.Steppup（1）；
});
})；

Chrome、Safari、Edge、Opera*/ 输入：：-webkit外部旋转按钮，输入：：-webkit内部旋转按钮{ -webkit外观：无；保证金：0； } /*火狐*/ 输入[type=“number”]{ -moz外观：textfield； } .flex{ 显示器：flex；边缘顶部：10px； }

+
+

使用传递给的事件对象，它包含对已单击按钮的引用（

Event.target

）。效果很好！如果我添加了另一个按钮，

decrement

。也是这样，对吗？为getDecrement添加一个新的事件侦听器并循环它们。在这种情况下，需要查看decrement按钮的位置。很可能您必须查找容器

const cont=document.queryselectoral（.flex”）；

并使用

cont.queryceltor（“.decrement”）分别搜索按钮

我用减量功能编辑了我的OP。我遗漏了什么？我正在循环

.flex

容器并用这些容器获取元素。我明白了，添加以声明循环中的所有字段。非常感谢，这是一个非常清楚的解释！