多个div的jQuery范围滑块值框

Question

我是js和jQuery中的新成员，我设法创建了一个简单的滑块，其下面有一个值指示框，用于显示滑块的当前值。我用下面的代码：

HTML

<div class="Slider"> 
    <input type="range" id="slider" min="0" max="100"> 
</div> 
<b><div id="Value">value: %</div></b> 

JS

$(window).on("load", function(){ 
     var slider = $("#slider"); 
     slider.change(function(){ 
      $("#Value").html (" value : " + this.value + "%"); 
     }); 
    }); 

我想用多格相同的滑块处于隐藏状态，并出现在相同的位置，当我点击一些链接。问题是，虽然滑块和值框出现，但由jQuery函数控制的输出值将不起作用，但对于第一个div。

有人可以告诉我该修改什么来解决这个问题吗？

Answer 1

问题是您的多个滑块具有相同的ID：id="slider"和ID相同的ID：id="Value"。使用类而不是ID：

<div class="Slider"> 
    <input type="range" class="slider-input" min="0" max="100"> 
    <b><div class="Value">value: %</div></b> 
</div> 

然后使用事件代表团是这样的：

$('.Slider').on('change', '.slider-input', function(){ 
    $(this).parent().find('.Value').html (" value : " + this.value + "%"); 
}); 

当然，如果你在你的CSS到该元素设置一种风格，那么你就需要更换所有的中#slider至.slider-input的实例。

工作示例：

$(function() {  
 
    $('.Slider').on('change', '.slider-input', function(){ 
 
     $(this).parent().find('.Value').html (" value : " + this.value + "%"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="Slider"> 
 
    <input type="range" class="slider-input" min="0" max="100"> 
 
    <b><div class="Value">value: %</div></b> 
 
</div> 
 

 
<div class="Slider"> 
 
    <input type="range" class="slider-input" min="0" max="100"> 
 
    <b><div class="Value">value: %</div></b> 
 
</div> 
 

 
<div class="Slider"> 
 
    <input type="range" class="slider-input" min="0" max="100"> 
 
    <b><div class="Value">value: %</div></b> 
 
</div>

Answer 2

动态添加滑块。

var sliderComponent = '<div class="slider_container">' + 
 
          '<input type="range" class="slider" min="0" max="100">' + 
 
          '<br>' + 
 
          'value: <span class="value"></span>%' + 
 
         '</div>'; 
 

 
var addSlider = function() { 
 
    var currentSlider = $(sliderComponent); 
 
    $(".sliders").append(currentSlider); 
 
    currentSlider.on("change", ".slider", function() { 
 
     $(this).siblings(".value").html($(this).val()); 
 
    }); 
 
}; 
 

 
$(document).ready(function() { 
 
    $("button").on("click", addSlider) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add_slider">ADD</button> 
 
<div class="sliders"> 
 
</div>

Answer 3

使用类sliderInputRange能够一个事件处理程序附加到多个输入元素。属性sliderInputRange允许指定其接收的值在div：

<div class="Slider"><input type="range" class="sliderInputRange" min="0" 
    max="100" data-value-id="value1"></div> 
<b><div id="value1">value: %</div></b> 

<div class="Slider"><input type="range" class="sliderInputRange" min="0" 
    max="100" data-value-id="value2"></div> 
<b><div id="value2">value: %</div></b> 

随着.attr（）值元素的id被检索：

$(window).on("load", function(){ 
    var slider = $(".sliderInputRange"); 
    slider.change(function(){ 

     var value_id= $(this).attr("data-value-id"); 

     $("#" + value_id).html (" value : " + this.value + "%"); 
    }); 
}); 

请尝试youreself： https://embed.plnkr.co/peXfdt/