同じクラス名の複数入力の入力タイプ範囲の表示値

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

私はそのループコードを作成しました。レンダリング機能がスライダを生成しています。変更イベントを使用してラベルを変更できます。バンドはスライダの現在の値です。

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>