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事件可用于更改标签。 band是滑块的当前值。

＆＃13;

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]);

＆＃13;

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

＆＃13;

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

1 个答案: