jQuery范围滑块-在表单提交时获取范围值？

我已经设置了jQuery UI范围滑块。移动滑块控件时，我的代码会将较低的范围值插入到隐藏输入中，也会将较高的范围值插入到隐藏输入中。这些值随着滑块的移动而不断变化，但存在一个问题。例如，如果下限值停在60000英镑，则插入隐藏div的值将为40000英镑。它总是1个位置不同步。这是我需要解决的第一个问题。在我的代码中，这些值设置为#minPrice和#maxPrice

第二个问题发生在表单提交上。我需要获取隐藏输入的值，并（在表单提交后的页面加载上）将其传递回显示滑块范围（例如40000到60000）的文本输入。此输入在代码中的ID为#amount

这是我的密码：

// 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)]);   

---

任何帮助都将不胜感激。

对于第一个问题，您使用了不同的方法来设置#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>

$（文档）.ready（函数（）{
//设置销售价格的增量
var增量=['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 minPrice=$（“#minPrice”）；
var maxPrice=$（“#maxPrice”）；
var slider=$（“#sliderPriceSale”）；
var initValuesMinIndex=$.inArray（minPrice.val（），增量）；//获取#minPrice中的值索引
var initValuesMaxIndex=$.inArray（maxPrice.val（），增量）；//获取#maxPrice中的值索引
var minPriceString=''；
var maxPriceString=''；
//设置滑块。创建时初始化#金额。
滑块，滑块({
范围：对，
分:0,，
最高：59，
步骤：1，
值：[initValuesMinIndex，initValuesMaxIndex]，
创建：函数（）{
amount.val（递增[initValuesMinIndex]+“至”+递增[initValuesMaxIndex]）；
},
幻灯片：功能（事件、用户界面）{
//获取最大/最小价格字符串。如果最大价格==最大值，请附加“+”号。
minPriceString=增量[ui.values[0]]；
maxPriceString=（增量[ui.values[1]]==增量[increments.length-1]）？增量[ui.values[1]]+“+”：增量[ui.values[1]]；
amount.val（minPriceString+“到”+maxPriceString）；
minPrice.val（增量[ui.values[0]]）；
maxPrice.val（增量[ui.values[1]]）；
}
});
});

至于第二个问题，在看不到其余代码的情况下，很难确切地说应该如何实现这一点，但一般来说，您所要做的就是确保在页面加载时将#maxPrice和#minPrice隐藏变量设置为正确的值，并且滑块在实例化时将自动显示正确的信息d，因为它在构造时会检查这些值。例如，如果您使用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'; ?>" />

没问题！很高兴我能帮上忙。只是一个简单的问题，如果我想在数组中最后一个值的末尾添加一个+符号，例如2000000+，我该怎么做？我不能在隐藏输入中将+符号添加到值的末尾-它只需要以#amount的形式添加到值中？同样，任何帮助都会很好。我做了为了实现这一点，对代码进行了一些快速编辑。基本上，我为max/min price创建了变量，创建了#amount框。如果max变量==增量数组中的最大值，那么我会附加一个加号。谢谢！你怎么知道这些事情？！嫉妒：-（多年的最后期限和满满一壶咖啡！继续努力克服困难，你最终会达到目的。此外，当你陷入困境时，尝试重构代码，使其更简单易读。例如，我在开始编写此脚本时，预先定义了我需要的所有变量。这使逻辑更易于遵循（同时也提高了性能！）尽管我喜欢漂亮的jQuery一行程序，但我还是希望我的代码能够正常工作。