jQuery UI 滑块未更改默认值
jQuery UI Slider not changing default Value
我用 jQuery UI 设置了一个滑块,并显示正确的默认值 60。但滑块仍然在最左边。它应该移动到值 60。
尝试了在 Whosebug 上找到的不同选项,但没有任何帮助。
var gewichtSlider = $("#gewicht-slider").slider({
min: 40,
max: 200,
slide: function(event, ui) {
$("#gewicht").val(ui.value).trigger('change');
$("#gewicht-label").text(ui.value);
$("#gewicht-handle").text(ui.value + ' kg');
}
});
gewichtSlider.slider('option', 'slide').call(gewichtSlider, null, {value: 60});
滑块没有移动。
JSfiddle:https://jsfiddle.net/tz6pea5c/
使用 value
属性 设置滑块的默认值。要在标签中显示初始值,您需要添加一个 create
回调,它在滑块初始化后立即被调用。然后,您需要添加一个 slide
回调来响应滑动事件并相应地更改标签的值。最后,我删除了一个隐藏的输入字段,并向您展示了如何使用单击按钮从滑块本身检索一个值。如果您需要将值保存在隐藏的输入字段中,那么您可以像这样修改 setSliderValue
函数:
function setSliderValue(value) {
$sliderLabel.text(value + " kg");
$("#your-hidden-field-id").val(value);
}
下面是完整的工作示例:
var defaultValue = 60;
var $sliderLabel = $(".slider-after");
function setSliderValue(value) {
$sliderLabel.text(value + " kg");
}
var $gewichtSlider = $("#gewicht-slider").slider({
min: 40,
max: 200,
value: defaultValue,
create: function() {
setSliderValue(defaultValue);
},
slide: function(event, ui) {
setSliderValue(ui.value);
}
});
$("#current-value").click(function() {
alert($gewichtSlider.slider( "value" ) + " kg");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="gewicht-container question-container">
<label for="gewicht">Wie schwer bist du?</label>
<p class="question-desc">Dies ist eine wichtige Angabe für die Matraztenhärte. Daten werden nicht gespeichert ;)</p>
<div class="slider">
<div class="slider-before">
Gewicht
</div>
<div id="gewicht-slider">
<div id="gewicht-handle" class="ui-slider-handle"></div>
</div>
<div class="slider-after">
</div>
<div class="clearfix"></div>
</div>
<hr/>
<button id="current-value">Get current value</button>
</div>
这是一个工作示例:https://jsfiddle.net/Twisty/34eg1xc9/21/
JavaScript
var gewichtSlider = $("#gewicht-slider");
gewichtSlider.slider({
min: 40,
max: 200,
create: function(e, ui) {
$("#gewicht-handle").css({
width: "3em",
textAlign: "center"
}).text('60 kg');
gewichtSlider.slider('value', 60);
},
slide: function(event, ui) {
$("#gewicht").val(ui.value).trigger('change');
$("#gewicht-handle").text(ui.value + ' kg');
}
});
我在你的代码中找不到 $("#gewicht-label")
。我还使用 create
回调来设置滑块。
我用 jQuery UI 设置了一个滑块,并显示正确的默认值 60。但滑块仍然在最左边。它应该移动到值 60。
尝试了在 Whosebug 上找到的不同选项,但没有任何帮助。
var gewichtSlider = $("#gewicht-slider").slider({
min: 40,
max: 200,
slide: function(event, ui) {
$("#gewicht").val(ui.value).trigger('change');
$("#gewicht-label").text(ui.value);
$("#gewicht-handle").text(ui.value + ' kg');
}
});
gewichtSlider.slider('option', 'slide').call(gewichtSlider, null, {value: 60});
滑块没有移动。
JSfiddle:https://jsfiddle.net/tz6pea5c/
使用 value
属性 设置滑块的默认值。要在标签中显示初始值,您需要添加一个 create
回调,它在滑块初始化后立即被调用。然后,您需要添加一个 slide
回调来响应滑动事件并相应地更改标签的值。最后,我删除了一个隐藏的输入字段,并向您展示了如何使用单击按钮从滑块本身检索一个值。如果您需要将值保存在隐藏的输入字段中,那么您可以像这样修改 setSliderValue
函数:
function setSliderValue(value) {
$sliderLabel.text(value + " kg");
$("#your-hidden-field-id").val(value);
}
下面是完整的工作示例:
var defaultValue = 60;
var $sliderLabel = $(".slider-after");
function setSliderValue(value) {
$sliderLabel.text(value + " kg");
}
var $gewichtSlider = $("#gewicht-slider").slider({
min: 40,
max: 200,
value: defaultValue,
create: function() {
setSliderValue(defaultValue);
},
slide: function(event, ui) {
setSliderValue(ui.value);
}
});
$("#current-value").click(function() {
alert($gewichtSlider.slider( "value" ) + " kg");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="gewicht-container question-container">
<label for="gewicht">Wie schwer bist du?</label>
<p class="question-desc">Dies ist eine wichtige Angabe für die Matraztenhärte. Daten werden nicht gespeichert ;)</p>
<div class="slider">
<div class="slider-before">
Gewicht
</div>
<div id="gewicht-slider">
<div id="gewicht-handle" class="ui-slider-handle"></div>
</div>
<div class="slider-after">
</div>
<div class="clearfix"></div>
</div>
<hr/>
<button id="current-value">Get current value</button>
</div>
这是一个工作示例:https://jsfiddle.net/Twisty/34eg1xc9/21/
JavaScript
var gewichtSlider = $("#gewicht-slider");
gewichtSlider.slider({
min: 40,
max: 200,
create: function(e, ui) {
$("#gewicht-handle").css({
width: "3em",
textAlign: "center"
}).text('60 kg');
gewichtSlider.slider('value', 60);
},
slide: function(event, ui) {
$("#gewicht").val(ui.value).trigger('change');
$("#gewicht-handle").text(ui.value + ' kg');
}
});
我在你的代码中找不到 $("#gewicht-label")
。我还使用 create
回调来设置滑块。