我设置了jQuery UI范围滑块。移动滑块控件时,我的代码会将较低范围的值插入隐藏的输入,并将较高的范围值插入隐藏的输入。当滑块移动时,这些值会不断变化,但是存在问题。例如,如果较低的值在£60,000上停止,则插入隐藏div的值将为£40,000。总是1个位置不同步。这是我需要解决的第一个问题。我的代码中的值设置为#minPrice和#maxPrice。
表单提交时出现第二个问题。我需要获取隐藏输入的值和(在表单提交后的页面加载上)将它们传递回显示滑块范围的文本输入,例如40,000至60,000。此输入在代码中具有#amount的ID。
这是我的代码:
// Set increments for sale slider prices
var increments = ['0', '20,000', '40,000', '60,000', '80,000', '100,000', '120,000', '140,000', '160,000', '180,000', '200,000', '220,000', '240,000', '260,000', '280,000', '300,000', '320,000', '340,000', '360,000', '380,000', '400,000', '420,000', '440,000', '460,000', '480,000', '500,000', '520,000', '540,000', '560,000', '580,000', '600,000', '620,000', '640,000', '660,000', '680,000', '700,000', '720,000', '740,000', '760,000', '780,000', '800,000', '820,000', '840,000', '860,000', '880,000', '900,000', '920,000', '940,000', '960,000', '980,000', '1,000,000', '1,100,000', '1,200,000', '1,300,000', '1,400,000', '1,500,000', '1,600,000', '1,700,000', '1,800,000', '2,000,000']
$('#sliderPriceSale').slider({
range: true,
min: 0,
step: 1,
max: 59,
values: [4, 15],
slide: function (event, ui) {
$('#amount').val(increments[ui.values[0]] + " to " + increments[ui.values[1]]);
var minPrice = $("#sliderPriceSale").slider("values", 0);
$('#minPrice').val(increments[minPrice]);
var maxPrice = $("#sliderPriceSale").slider("values", 1);
$('#maxPrice').val(increments[maxPrice]);
}
});
$('#amount').val(increments[$('#sliderPriceSale').slider("values", 0)] + " to " + increments[$('#sliderPriceSale').slider("values", 1)]);
非常感谢任何帮助。
答案 0 :(得分:4)
对于第一个问题,您使用不同的方法设置#minPrice / #maxPrice和#amount输入。我清理了代码,使其更具可读性,并将DOM对象和其他重要数据存储到变量中。这样可以提高性能并使代码更容易调试。此重构代码始终从滑块报告正确的值。
<script type="text/javascript">
$(document).ready(function() {
// Set increments for sale slider prices
var increments = ['0', '20,000', '40,000', '60,000', '80,000', '100,000', '120,000', '140,000', '160,000', '180,000', '200,000', '220,000', '240,000', '260,000', '280,000', '300,000', '320,000', '340,000', '360,000', '380,000', '400,000', '420,000', '440,000', '460,000', '480,000', '500,000', '520,000', '540,000', '560,000', '580,000', '600,000', '620,000', '640,000', '660,000', '680,000', '700,000', '720,000', '740,000', '760,000', '780,000', '800,000', '820,000', '840,000', '860,000', '880,000', '900,000', '920,000', '940,000', '960,000', '980,000', '1,000,000', '1,100,000', '1,200,000', '1,300,000', '1,400,000', '1,500,000', '1,600,000', '1,700,000', '1,800,000', '2,000,000'];
var amount = $('#amount');
var minPrice = $('#minPrice');
var maxPrice = $('#maxPrice');
var slider = $('#sliderPriceSale');
var initValuesMinIndex = $.inArray(minPrice.val(), increments); // Get index of value in #minPrice
var initValuesMaxIndex = $.inArray(maxPrice.val(), increments); // Get index of value in #maxPrice
var minPriceString = '';
var maxPriceString = '';
// Setup slider. Initialize #amount on creation.
slider.slider({
range: true,
min: 0,
max: 59,
step: 1,
values: [initValuesMinIndex, initValuesMaxIndex],
create: function() {
amount.val(increments[initValuesMinIndex] + " to " + increments[initValuesMaxIndex]);
},
slide: function (event, ui) {
// Get max/min price strings. If max price is == largest value append "+" sign.
minPriceString = increments[ui.values[0]];
maxPriceString = (increments[ui.values[1]] == increments[increments.length-1]) ? increments[ui.values[1]] + "+" : increments[ui.values[1]];
amount.val(minPriceString + " to " + maxPriceString);
minPrice.val( increments[ui.values[0]] );
maxPrice.val( increments[ui.values[1]] );
}
});
});
</script>
至于第二个问题,很难确切地说如何在不看到其余代码的情况下完成这项工作,但一般而言,您需要做的就是确保将#maxPrice和#minPrice隐藏变量设置为正确的值当页面加载时,滑块将在实例化时自动显示正确的信息,因为它在构造时检查这些值。例如,如果您使用PHP并通过POST提交表单,那么您可以使用以下代码来隐藏变量:
<!-- Output minPrice & maxPrice values. Default to 80,000 and 300,000 respectively -->
<input type="hidden" id="minPrice" name="minPrice" value="<?php echo (isset($_POST['minPrice'])) ? $_POST['minPrice'] : '80,000'; ?>" />
<input type="hidden" id="maxPrice" name="maxPrice" value="<?php echo (isset($_POST['maxPrice'])) ? $_POST['maxPrice'] : '300,000'; ?>" />