我有以下功能,可以从可拖动/定义的范围开始工作。我遇到了一个我无法弄清楚的问题。如果用户使用可拖动条并选择范围,则表单提交正常。但是,如果他们没有定义范围并且基本上使用我有的默认值,则表单不会提交。我知道这是因为点击功能没有运行。
我的想法是,如果范围在click函数之外定义了默认值,但是我不确定如何执行。有谁知道我怎么能这样做?
我在提交范围内调用这样的范围:
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");
}
});
完整代码。
submitHandler: function(form) {
event.preventDefault();
var range_upper = ranges[i].upper;
var range_lower = ranges[i].lower;
}
我如何提交变量 - 使用Ajax的Submithandler
{{1}}
答案 0 :(得分:1)
如果您只想将范围设为默认值,假设范围[i] .upper和lower返回falsey值,您可以使用OR(||)将“default”设置为您选择的数字。
var range_upper = ranges[i].upper || 1;
var range_lower = ranges[i].lower || 10;
答案 1 :(得分:0)
您可以使用background: #c2ddf6 !important;
运算符指定值等于值(如果它是真实的)或默认值(如果它是假的)。
||