我有一个jQuery滑块,允许用户通过选择时间范围来选择多次。我使用一些速记数学来分析时间。由于某种原因,当我从一侧向后推右滑块时,它会添加到左侧的滑块上。所以我最终选择了一个未被选择的时间。换句话说,一个滑块正在更改另一个滑块的值。
我尝试更改
var val0 = $(".slider-range-" + index).slider("values", 0),
val1 = $(".slider-range-" + index).slider("values", 1),
到
var val0 = $(".slider-range-" + index).slider("values", 0),
val1 = $(".slider-range-" + index).slider("values", 0),
这似乎抵消了我右侧滑块中的值。
每个滑块使用以下方式添加一个ID:
var clone = $("#timeRowDup").clone();
clone.removeAttr("id");
var cloneHtml = clone.html();
cloneHtml = cloneHtml.replace(/###/g, interviewIndex);
还有一些剩余的代码:
function slideTime(event, ui) {
var index = event.target.id.split("-").pop();
var val0 = $(".slider-range-" + index).slider("values", 0),
val1 = $(".slider-range-" + index).slider("values", 1),
minutes0 = parseInt(val0 % 60, 10),
hours0 = parseInt(val0 / 60 % 24, 10),
minutes1 = parseInt(val1 % 60, 10),
hours1 = parseInt(val1 / 60 % 24, 10);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
setSliderTimes(index, startTime, endTime);
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (hours < 12) {
time = "AM";
} else {
time = "PM";
}
if (hours == 0) {
hours = 12;
}
if (hours > 12) {
hours = hours - 12;
}
if (minutes.length == 1) {
minutes = "0" + minutes;
}
return hours + ":" + minutes + " " + time;
}
$(".slider-range-" + interviewIndex).slider({
range: true,
min: 510,
max: 1020,
values: [startTimeVal, endTimeVal],
slide: slideTime
});
HTML:
<div id="slider-###" style="min-width:200px;margin:10px 0px;" class="slider-range-###"></div>
每个滑块应给出所选的确切时间,而一个滑块不会影响另一个滑块的时间。