多個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/