我有以下功能可在可拖动/定义的范围内工作。我遇到无法解决的问题。如果用户使用可拖动的栏并选择一个范围,则表单提交很好。但是,如果他们没有定义范围,而实际上使用的是我拥有的默认值,则表单不会提交。我知道这是因为单击功能未运行。

我想会起作用的是,如果范围在click函数之外定义了默认值,但是我不确定如何执行。有人知道我该怎么做吗?

我这样称呼提交范围:

var range_upper = ranges[i].upper; var range_lower = ranges[i].lower;

完整代码。

var iSelected2 = 0;
var i = 0;
$(function() {
    $("#sliderInterval").draggable();

    //For human test
    $.validator.addMethod("customRule", function(value, element, params) {
        return this.optional(element) || value.toLowerCase() === params[0].toLowerCase();
    }, "Please enter the correct value");

    var ranges = [{
        lower: 500,
        upper: 1000
    }, {
        lower: 1100,
        upper: 2000
    }, {
        lower: 2100,
        upper: 5000
    }, {
        lower: 5100,
        upper: 10000
    }, {
        lower: 11000,
        upper: 20000
    }, {
        lower: 21000,
        upper: 50000
    }, ];
    var wslider = $('#sliderBar').width() / (ranges.length);
    for (var i = 0; i < ranges.length; i++) {
        var range = $('<div class="rangedot"><div class="intervalCircle"></div></div>');
        var left = (100 / (ranges.length) * i);
        rangeleft = "calc(" + left + "% - 2px)";
        range.css({
            left: rangeleft,
            width: wslider
        });
        range.on('click', function(idx) {
            return function() {
                //iSelected = idx;
                iSelected = $(idx.target).index();
                var sliderleft = wslider * idx;
                $('#sliderInterval').animate({
                    left: sliderleft
                });
                $('#budgetAmount').text('$' + ranges[idx].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' - ' + '$' + ranges[idx].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
            };
        }(i));
        $('#sliderBar').append(range);
        $('#sliderInterval').css('width', wslider + 'px');
    }
    $('#budgetAmount').show().text('$500 - $1,000 Budget');


    var handle = $('#custom-handle');
    var amount = $('#budgetAmount');
    $('#slider').slider ({
        min: 0,
        max: 5,
        step: 1,
        create: function() {
            var i = $(this).slider("value");
            amount.text("$" + ranges[i].lower + " - $" + ranges[i].upper);
            $.each(ranges, function(key, item) {
                var range = $("<div>", {
                    class: "rangedot"
                }).data("key", key);
                var dot = $("<div>", {
                    class: "intervalCircle"
                }).appendTo(range);
                var l = Math.round(100 / (ranges.length - 1) * key);
                var w = $("#slider").width() / (ranges.length);
                range.css({
                    left: "calc(" + l + "% - " + (w / 2) + "px)",
                    width: w + "px"
                }).change(function() {
                    $("#slider").slider("value", $(this).data("key"));
                }).appendTo("#slider");
            });
        },
        slide: function(event, ui) {
            i = ui.value;
            iSelected2 = $(i.target).index();
            amount.text("$" + ranges[i].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")  + " - $" + ranges[i].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " Budget");
        }
    });


我如何提交变量-使用Ajax的Submithandler

submitHandler: function(form) {
    event.preventDefault();
    var range_upper = ranges[i].upper;
    var range_lower = ranges[i].lower;
}

最佳答案

如果只想将范围设为默认值,则假设range [i] .upper和lower返回一个falsey值,则可以使用OR(||)将“ default”设置为您选择的数字。

var range_upper = ranges[i].upper || 1;
var range_lower = ranges[i].lower || 10;

10-04 22:18
查看更多