jQuery范围滑块正在移动右滑块时改变左滑块的值吗?

时间:2019-08-19 16:34:12

标签: javascript jquery

我有一个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>

每个滑块应给出所选的确切时间,而一个滑块不会影响另一个滑块的时间。

0 个答案:

没有答案