javascript - 带有多个 slider 的 Bootstrap slider

Question

说到 Javascript，我算是一个完全的初学者。有 Python 在我身后，我多少有点了解发生了什么。我一直在用this library ，这是一个 Bootstrap slider (现在我指的不是旋转木马，那是完全不同的东西)，这是一个用于输入表单的 slider 。

我的问题是，我正在从 Django 模型动态输出一个表单，在这个表单中，它可能会同时运行多个 slider 。

根据 bootstrap-slider 附带的文档，下面的代码将允许您在移动 slider 时将 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

首先，您需要确保 data-for 的值的 input和 id的 span与之相关的是相同的。因为这就是您知道哪个 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);
});