控制多个范围滑块 Django 表单答案

【问题标题】：Control multiple range sliders Django form控制多个范围滑块 Django 表单
【发布时间】：2020-04-06 12:23:02
【问题描述】：

我想要什么： 一页上有多个 Range 滑块（数量根据用户选择而变化），移动滑块应该会更新值并将其显示在 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>

Views.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)

Forms.py

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

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

【问题讨论】：

标签： javascript jquery html css django

【解决方案1】：

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

<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>

【讨论】：