我有以下simple-slider.min.js
:
<div class="field text" id="AmountSliderContainer">
<label class="sliderAmountLabel" id="sliderAmountLabel" for="SliderLoanAMount">How much would you like to borrow?</label>
<div id="SliderLoanAMount">
<ul>
<li id="amountSlider">
<input name="lendingAmount" id="lending" class="slider amount" type="text" data-slider="true" data-slider-highlight="true" data-slider-range="1000,10000" data-slider-step="250" />
<div class="LoanAmountContainer">
<span class="PoundSign">£</span><span><input readonly="true" id="<% = LoanApplication.CONST_FIELD_NAME_LOANAMOUNT %>" name="<% = LoanApplication.CONST_FIELD_NAME_LOANAMOUNT %>" value="<% = oLoanApplication.GetField(LoanApplication.CONST_FIELD_NAME_LOANAMOUNT).GetValueOrDefault(loanAmount) %>" class="output amount plain" /></span>
</div>
</li>
</ul>
</div>
</div>
我有以下更改事件:
$('#AmountSliderContainer.field.text .slider.amount').bind('slider:changed', function (event, data) {
$('#AmountSliderContainer.field.text .output.amount, #AmountSliderContainer .foot p .amount').text(data.value.toFixed(2));
$('#AmountSliderContainer.field.text input.output.amount').val(data.value.toFixed(2));
});
哪种方法正常。
我现在正在尝试创建一个ready
事件,这将使滑块在页面加载时滑动到我选择的值。
$('#AmountSliderContainer.field.text .slider.amount').bind('slider:ready', function (event, data) {
$('#AmountSliderContainer.field.text .slider.amount').simpleSlider("setValue", 5000);
});
根据这些说明:
http://loopj.com/jquery-simple-slider/
应该设置滑块的值,但不是。
我知道ready
事件是在正确的时间触发,因为我已经让它在触发时显示警报。但是,该命令似乎不起作用。
我没有制作滑块,但我很确定我使用的说明适用于此滑块。
所以我的问题是,如何让滑块滑动到我选择的值?
我考虑过的一种可能性是我没有正确识别滑块,所以没有设置值?但那时准备好的事件不会开火?如果这是我的错误,如何识别滑块,例如:
$('#AmountSliderContainer.field.text .slider.amount').
包含识别滑块的错误信息?
我试过这个:
$('#AmountSliderContainer.field.text .slider.amount').bind('slider:ready', function (event, data) {
$('#amountSlider').simpleSlider("setValue", 5000);
});
但它也无效
答案 0 :(得分:1)
检查以下示例:
$('#lending').simpleSlider("setValue", $("#loanAmt").val());
$("[data-slider]").bind("slider:ready slider:changed", function (event, data) {
$("#loanAmt").val(data.value);
});