用於自舉的滑塊與多個滑塊

Question

當談到Javascript，我有點完全初學者。有了Python後，我有點理解了一些事情。我一直在使用this library，這是一個引導滑塊（現在我不是指傳送帶，這是一個完全不同的東西），這是一個輸入表單的滑塊。

我的問題是，我是從Django模型動態輸出一個表單，並且在這種形式下它可能會有幾個這樣的滑動條一次完成。

根據bootstrap-slider附帶的文檔，下面的代碼將允許您在移動滑塊時將滑塊的值傳遞給DOM。

################### 
     HTML 
################### 

<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/&t 
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span> 


################### 
    JavaScript 
################### 

// With JQuery 
$("#ex6").slider(); 
$("#ex6").on("slide", function(slideEvt) { 
    $("#ex6SliderVal").text(slideEvt.value); 
}); 

// Without JQuery 
var slider = new Slider("#ex6"); 
slider.on("slide", function(slideEvt) { 
    $("#ex6SliderVal").text(slideEvt.value); 
});) 

現在，這引起了我這麼大的問題，這個問題是我已經因爲Django的的實現代碼的方式。

{% for field in filter.field_set.all %} 
    <input id="slider-{{ field.pk }}" name="{{ field.filter.title }}" data-slider-id='{{ field.pk }}Slider' type="text" data-slider-min="{{ field.min }}" data-slider-max="{{ field.max }}" data-slider-step="{{ field.step }}" data-slider-value="{{ field.min }}" data-for="slider_value_{{ field.pk }}" data-slider-orientation="vertical"/> 
    <span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="slider_value_{{ filter.pk }}">3</span></span> 
{% endfor %} 
$('[id^=slider-]').slider(); 
$(this).on("slide", function (slideEvt){ 
    value = this.data('for'); 
    changer = $(value); 
    changer.text(slideEvt.value); 
}); 

我完全對如何解決這個問題感到困惑。我正在嘗試做的是使用data-slider-label中定義的id來獲取跨度，將.text值更改爲slideEvt.value。

Answer 1

更新2

首先，你需要確保的input的data-for和值與它相關聯的span的id相同。因爲那是你怎麼知道要改變哪個span。

所以，改變span這樣的：

<span id="slider_value_{{ field.pk }}">3</span> 

注：但是，如果你不想改變span的id，你可以的data-for值更改爲slider_value_{{ filter.pk }}。請記住，兩者都應該匹配。

現在的JavaScript/jQuery的一部分

$('[id^=slider-]').slider(); 

$('[id^=slider-]').on("slide", function(slideEvt) { 
    changer_span = $(this).attr('data-for'); 
    $('#' + changer_span).text(slideEvt.value); 
});