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的span，以将.text值更改为slideEvt.value。

Answer 1

更新2

首先，您需要确保data-for的{{1}}和与其关联的input的{{1}}的值相同。因为这就是您将如何知道要更改的id。

所以，像这样更改span：

span

注意：但是，如果您不想更改span的{{1}}，则可以将<span id="slider_value_{{ field.pk }}">3</span>的值更改为span。请记住，两者都应该匹配。

现在是JavaScript / jQuery部分

id

带有多个滑块的自举滑块

1 个答案: