javascript - 多个 div 的 jQuery 范围 slider 值框

Question

我是 js 和 jQuery 的新手，我设法创建了一个简单的 slider ，它下面有一个值指示器框，显示 slider 的当前值。我使用了以下代码:

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 中使用相同的 slider ，当我单击某些链接时，这些 slider 被隐藏并出现在相同的位置。问题是虽然出现了 slider 和值框，但由 jQuery 函数控制的输出值将不起作用，但对于第一个 div。

谁能告诉我要更改什么来解决这个问题？

Answer 1

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

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

然后像这样使用事件委托(delegate):

$('.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>