说到 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
的值。
最佳答案
更新 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);
});
关于javascript - 带有多个 slider 的 Bootstrap slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30485175/