jquery - 如何使用 jQuery 选择器来标记 oTree Slider 小部件？

Question

我正在尝试将 slider 标记为jQuery UI Slider Labels Under Slider 。然而，我不是在处理 ui-slider，而是在处理 oTree 中的 slider 小部件。

问题的出色答案Mandatory slider in oTree/django解释如何使用 jQuery 选择器来选择 oTree slider :

$('[data-slider] input[type="range"]')

我有一个 slider ，显示当前选定的值 (0-100)。我想做的是在 slider 下方添加一些标签(例如，如果 slider 值是温度，则为“冷”、“中性”、“暖”)。我尝试使用以下代码来选择 oTree slider 并附加标签，但没有出现标签。

{% formfield player.mySliderInput type="Slider"}

{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var mylabel = $('<label>25</label>').css('left', '25%');
    $('[data-slider] input[type="range"]').append(mylabel);
});
</script>
{% endblock %}

页面的 HTML 如下所示:

<div class="form-group required">     
  <label class="col-form-label" for="id_myInput">How hot is it? (0-100):</label>
  <div class="controls  field-myInput">
    <div class="input-group slider" data-slider>
      <input type="range" name="myInput" value="None"
        step="1"
        min="0"
        max="100"
        required
        id="id_myInput"
        class="form-control"
      />

      <div class="input-group-append">
        <span class="input-group-text" data-slider-value title="current value"></span>
      </div>
    </div>
  </div>
</div>

我不确定要选择哪个对象(div？输入？)并将标签附加到其中。

Answer 1

从那时起，oTree 稍微改变了表单类命名。

使用下面的代码:

{% block scripts %}
<script>
    $(function () {
        var SliderTouched = false;
        var selector = $('[data-slider] input[type="range"]');
        selector.change(function () {
            SliderTouched = true;
        });

        $("#form").submit(function (event) {
            if (!SliderTouched) {
                event.preventDefault();
            }
        });
    });

</script>
{% endblock %}

它的作用如下:

1. 加载页面时，它会将变量设置为 false。
2. 除非此变量 (SliderTouched) 保持为 false，否则表单将不会提交
3. 当您触摸 slider 时，变量会设置为 True，以便可以提交表单。