jquery - 反向 JQuery 范围 slider 处理程序

Question

我正在研究范围 slider ，我想在单击按钮时反转 slider 中的范围。我几乎完成了基本操作，但我对交换文本框中的值后正在工作的 slider handle 的计算感到困惑。

我已经在 fiddle 中发布了代码。

* 用于反转值的 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>

你可以在这里找到代码 FIDDLE

Answer 1

您需要在每次更改范围时销毁 slider 。

我不知道这是否是最佳解决方案，但在这里我在页面加载时构建一个 slider ，然后在单击按钮时销毁它并创建一个新的 slider ，我们将使用它直到页面重新加载.

代码需要优化，我对此持开放态度。请在下面的评论中提出建议。

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