具有相同类别名称的多个输入的输入类型范围的显示值

Question

我想，以显示对span标签右侧下方相同类别的每个输入类型范围的值。

到目前为止，这是我的代码的样子：

<input type="range" min="2" max="50" value="20" class="slider" >
 <label>You selected: <span class="limit"></span></b></label>
 //this label should display the current value of the first slider

<input type="range" min="2" max="50" value="20" class="slider"  >
<label>You selected: <span class="limit"></span></b></label>
//this label should display the current value of the second slider

<input type="range" min="2" max="50" value="20" class="slider" >
<label>You selected: <span class="limit"></span></b></label>
//this label should display the current value of the third slider

我想，因为这些输入通过一个循环产生度日类名称，而不是ID元素，并不能对所有的人都相同的ID。 有没有一种方法可以使用JavaScript或jQuery将滑块的当前值分配给它下面的范围？

Answer 1

我已经做了循环代码。 渲染功能正在生成滑块。 change事件可用于更改标签。 bands是滑块的当前值。

 var render = (bands) => { const container = document.querySelector(".container"); const bandsHTML = bands.reduce( (r, band) => r + `<div class='column'><input type='range' value=${band} class='slider' min="-12" max="12" /><span class='slider__value'>${band}</span></div>`, `` ); container.innerHTML = bandsHTML; }; document.addEventListener( "change", e => { const classList = e.target.classList; const sliders = document.querySelectorAll(".slider"); const values = Array.from(sliders).map(slider => slider.value); render(values); }, false ); //initial values render([2,3,2,3]); 

 <div class='container'> </div>