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 + "%"); 
        });
    });

我想在隐藏的多个div中使用相同的滑块，当我点击某些链接时，它会出现在相同的位置。问题是虽然出现了滑块和值框，但是由jQuery函数控制的输出值不适用于第一个div。

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

Answer 1

问题是您有多个具有相同ID的滑块：id="slider"和具有相同ID的div：id="Value"。使用class而不是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

使用class sliderInputRange 可以将一个事件处理程序附加到多个input-elements。属性 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（）检索value-element的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 + "%"); 
    });
});

请为自己尝试： https://embed.plnkr.co/peXfdt/

Answer 3

动态添加滑块。

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>

多个div的{jQuery范围滑块值框

3 个答案: