我正在研究一个范围滑块,我想在单击按钮时反转滑块中的范围。我几乎已经完成了基本工作,但我对交换文本框中的值后滑块手柄工作的计算感到困惑。
我已经在小提琴中发布了代码。
*用于反转值的 JQuery 点击处理程序*
$("#reversePassFailVal").click(function(e){
e.preventDefault();
sliderElement.slider({
slide: function(event, ui) {
$("#minValue").val(9-ui.values[0]);
$("#maxValue").val(5-ui.values[1]);
}
})
$("#minValue").val(sliderElement.slider('values', 1));
$("#maxValue").val(sliderElement.slider('values', 0));
});
.HTML
<form id="form1">
Caution Range:
<span id="cautionVal"/>
<br/>
<div id="slider"/>
<br/>
<label for="txtPassRange">Pass Range</label>
<input type="text" id="minValue"/>
<br/>
<label for="txtFailRange">Fail Range</label>
<input type="text" id="maxValue" />
<br/>
<a href="#" class="btn btn-default" id="reversePassFailVal">Inverse</a>
</form>
您可以在此中找到代码小提琴
您需要在
每次范围更改时销毁滑块。
我不知道这是否是最佳解决方案,但在这里我正在加载页面时构建一个滑块,然后在单击按钮时将其销毁并创建一个新的滑块,我们将使用该滑块直到重新加载页面。
代码需要优化,我对此持开放态度。请在下面的评论中建议它们。
HTML:(通知 #Slider1(
<form id="form1">
Caution Range: <span id="cautionVal"></span>
<br /><br />
<div id="slider"><br /></div>
<div id="slider1"></div><br />
<label for="txtPassRange">Pass Range</label>
<input type="text" id="minValue" />
<br /><br />
<label for="txtFailRange">Fail Range</label>
<input type="text" id="maxValue" />
<br /><br />
<a href="#" class="btn btn-default" id="reversePassFailVal">Inverse</a>
</form>
.JS:
$(document).ready(function() {
var cautionValue = $("#cautionVal");
var flag = 0;
var sliderElement = $("#slider");
var sliderElement1 = $("#slider1");
$("#slider").slider({
range: true,
steps: 0.01,
values: [5, 9],
min: 0,
max: 24,
slide: function(event, ui) {
cautionValue.html(ui.values[0] + '-' + ui.values[1] + 'km/lo');
$("#minValue").val(ui.values[0]);
$("#maxValue").val(ui.values[1]);
},
});
cautionValue.html(sliderElement.slider('values', 0) + '-' + sliderElement.slider('values', 1) + 'km/lo');
$("#minValue").val(sliderElement.slider('values', 0));
$("#maxValue").val(sliderElement.slider('values', 1));
// Inverse Click Handler
$("#reversePassFailVal").click(function(e) {
e.preventDefault();
if ($('#slider').length) {
sliderElement.slider("destroy");
sliderElement.remove();
} else {
sliderElement1.slider("destroy");
}
var maxVal = $("#maxValue").val();
var minVal = $("#minValue").val();
var minRange = 0;
var maxRange = 24;
if (flag === 0) {
maxVal = maxVal * -1;
minVal = minVal * -1;
minRange = -24;
maxRange = 0;
}
sliderElement1.slider({
range: true,
steps: 0.01,
values: [maxVal, minVal],
min: minRange,
max: maxRange,
slide: function(event, ui) {
if (flag === 0) {
cautionValue.html(Math.abs(ui.values[0]) + '-' + Math.abs(ui.values[1]) + 'km/lo');
$("#minValue").val(Math.abs(ui.values[1]));
$("#maxValue").val(Math.abs(ui.values[0]));
} else {
cautionValue.html(Math.abs(ui.values[1]) + '-' + Math.abs(ui.values[0]) + 'km/lo');
$("#minValue").val(Math.abs(ui.values[0]));
$("#maxValue").val(Math.abs(ui.values[1]));
}
console.log(Math.abs(ui.values[0]) + '-' + Math.abs(ui.values[1]) + 'km/lo');
},
});
var val0 = Math.abs(sliderElement1.slider('values', 0));
var val1 = Math.abs(sliderElement1.slider('values', 1));
cautionValue.html(val0 + '-' + val1 + 'km/lo');
$("#minValue").val(val0);
$("#maxValue").val(val1);
if (flag === 0) {
flag = 1;
} else {
flag = 0;
}
});
});
在这里看到它的实际应用: JsFiddle