如何使用 jQuery 选择器标记 oTree Slider 小部件?
How to label an oTree Slider widget using a jQuery selector?
我正在尝试像 jQuery UI Slider Labels Under Slider 中那样标记一个滑块。然而,我不是在处理 ui-slider,而是在处理来自 oTree 的滑块小部件。
问题 的出色答案解释了如何使用 jQuery select 或 select oTree 滑块:
$('[data-slider] input[type="range"]')
我有一个显示当前 selected 值 (0-100) 的滑块。我想做的是在滑块下方添加一些标签(例如 "cold"、"neutral"、"warm",如果滑块值是温度)。我尝试了以下代码 select oTree 滑块并附加标签,但没有出现标签。
{% 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?输入?)添加到 select 并将标签附加到。
从那时起,oTree 稍微改变了 class 命名形式。
使用下面的代码:
{% 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 %}
它的作用如下:
- 它在加载页面时将变量设置为
false
。
- 除非此变量 (
SliderTouched
) 保持为假,否则表单不会提交
- 当您触摸滑块时,变量设置为 True,以便可以提交表单。
更新..
根据 OP 评论,最终附加到 oTree 滑块的 selector 是 .controls
var $label = $('<label>sometext</label>').css('left', '10%');
$('.controls').append($label);
原来...
使用 has 属性 select 或 (https://api.jquery.com/has-attribute-selector/) 您可以 select 按属性。
<input type="range" data-slider="someval">
以上给出 html.. 你可以 select 它与...
[data-slider]
添加 input[type="range"]
将进一步限定结果以仅包含类型范围。
我正在尝试像 jQuery UI Slider Labels Under Slider 中那样标记一个滑块。然而,我不是在处理 ui-slider,而是在处理来自 oTree 的滑块小部件。
问题
$('[data-slider] input[type="range"]')
我有一个显示当前 selected 值 (0-100) 的滑块。我想做的是在滑块下方添加一些标签(例如 "cold"、"neutral"、"warm",如果滑块值是温度)。我尝试了以下代码 select oTree 滑块并附加标签,但没有出现标签。
{% 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?输入?)添加到 select 并将标签附加到。
从那时起,oTree 稍微改变了 class 命名形式。
使用下面的代码:
{% 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 %}
它的作用如下:
- 它在加载页面时将变量设置为
false
。 - 除非此变量 (
SliderTouched
) 保持为假,否则表单不会提交 - 当您触摸滑块时,变量设置为 True,以便可以提交表单。
更新..
根据 OP 评论,最终附加到 oTree 滑块的 selector 是 .controls
var $label = $('<label>sometext</label>').css('left', '10%');
$('.controls').append($label);
原来...
使用 has 属性 select 或 (https://api.jquery.com/has-attribute-selector/) 您可以 select 按属性。
<input type="range" data-slider="someval">
以上给出 html.. 你可以 select 它与...
[data-slider]
添加 input[type="range"]
将进一步限定结果以仅包含类型范围。