Ползунок диапазона jQuery - получить значения диапазона при отправке формы?

У меня настроен ползунок диапазона пользовательского интерфейса jQuery. Когда элементы управления ползунком перемещаются, мой код вставляет нижнее значение диапазона в скрытый ввод, а также более высокое значение диапазона в скрытый ввод. Эти значения постоянно меняются при перемещении ползунка, но есть проблема. Если нижнее значение остановится, например, на 60 000 фунтов стерлингов, значение, вставленное в скрытый элемент div, будет равно 40 000 фунтов стерлингов. Это всегда 1 позиция не синхронизирована. Это моя первая проблема, которую мне нужно исправить. Значения установлены как #minPrice и #maxPrice в моем коде.

Вторая проблема возникает при отправке формы. Мне нужно получить значения скрытых входов и (при загрузке страницы после отправки формы) передать их обратно в текстовый ввод, который показывает диапазон для ползунков, например. от 40 000 до 60 000. Этот вход имеет идентификатор #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)]);

Любая помощь будет высоко ценится.


jquery submission uislider
person Jonathan    schedule 23.08.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Что касается первой проблемы, вы использовали разные средства для установки входных параметров #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'; ?>" />
person Joe Landsman    schedule 23.08.2011
comment
Без проблем! Рад, что смог помочь. - person Joe Landsman; 24.08.2011
comment
Просто небольшой вопрос: если бы я хотел добавить символ + в конец последнего значения в массиве, например, 2 000 000+, как бы я это сделал? Однако я не могу добавить символ + в конец значения в скрытом вводе - его нужно добавить только к значению в #amount? Опять же, любая помощь будет здорово. - person Jonathan; 25.08.2011
comment
Я сделал пару быстрых правок в коде, чтобы добиться этого. По сути, я создал переменные для максимальной/минимальной цены, которые создают поле #amount. Если максимальная переменная == наибольшее значение в массиве приращений, я добавляю знак плюс. - person Joe Landsman; 25.08.2011
comment
Спасибо! Откуда ты знаешь эти вещи?!?! Ревнивый :-( - person Jonathan; 25.08.2011
comment
Годы дедлайнов в последнюю минуту и ​​полные кофейники! Продолжайте работать над трудными моментами, и в конце концов вы доберетесь туда. Кроме того, если вы застряли, попробуйте реорганизовать свой код, чтобы сделать его более простым и удобным для чтения. Например, я начал этот скрипт с определения всех необходимых переменных заранее. Это упростило следование логике (и повысило производительность!). Как бы мне ни нравились причудливые однострочники jQuery, я бы предпочел, чтобы мой код работал правильно. - person Joe Landsman; 25.08.2011