时间戳

首页 > 解决方案 > 控制多个范围滑块 Django 表单

javascript - 控制多个范围滑块 Django 表单

问题描述

我想要的： 一页上的多个范围滑块（数量根据用户选择而变化），移动滑块应该更新值并将其显示在 span 元素中以及更新模型。

问题： 不幸的是，当有多个使用 forloop 创建的滑块时，我不知道如何更改滑块的值。当我移动滑块的滑块手柄时，span 元素不会更新，滑块的 value 元素也不会改变。

html:

<form method="post">
formset1.management_form }}
for form in formset1 %}
    <div class="custom-slider-container">
        <label>{{ form.name.value }}</label>
        <span id="demo-{{ forloop.counter0 }}" class="range-val">0</span>
        {{ form.weight }}
    <div>
{% endfor %}
</form>

视图.py：

initial = Driver.objects.filter(simulation=chosenSim, type='KEY_OUTPUT')
formset = sliders_formset(request.POST or None, queryset=initial)
    if 'sliders_confirm' in request.POST:
        if formset.is_valid():
            instances = formset.save(commit=False)
            for form in instances:
                form.save()
        return HttpResponseRedirect(request.path_info)

表格.py

sliders_formset = modelformset_factory(Driver, fields=['name', 'weight'], extra=0,
                                   widgets={'weight': RangeInput(attrs={'class': 'custom-slider', 'max': 20})})

如果需要任何其他信息，请告诉我，我会添加它！

标签： javascriptjqueryhtmlcssdjango

解决方案

使用“每个”解决了我的问题！

<script>
    var rangeSlider = function(){
        var slider = $('.custom-slider-container'),
        range = $('.custom-slider'),
        value = $('.range-val-label');

        range.each(function(){
            var range_val = $(this).attr('value');
            var range_val = Math.trunc(range_val);
            $(this).prev().html(range_val);
        });

        slider.each(function(){

            value.each(function(){
                var value = $(this).next().attr('value');
                $(this).html(value);
            });

            range.on('input', function(){
                $(this).prev(value).html(this.value);
            });
        });
    };
rangeSlider();
</script>

推荐阅读