时间戳

首页 > 解决方案 > 您如何仅获取使用 jQuery 滑块而不是两个句柄移动的滑块句柄的值

javascript - 您如何仅获取使用 jQuery 滑块而不是两个句柄移动的滑块句柄的值

问题描述

我想用两个句柄中的值更新一个字段，但只能单独更新。每次任何一个句柄滑动时，滑块都会在数组中返回这两个值，因此我的元素总是首先使用第一个句柄值更新，然后是第二个句柄值，而不是仅使用滑动句柄的值。我怎样才能只从进行滑动的手柄中获取值？

我尝试为正在更新的输入添加一个 onChange 函数，但由于某种原因它不起作用。

https://jsfiddle.net/xstatic/6jm2prwL/5/

HTML

<div id="slider">

</div>


<div id="response">

</div>

JS

  jQuery('#slider').slider({

  min: 0,
  max: 100,
  step: 1,
  values: [0, 100],
  slide: function(event, ui) {




    for (var i = 0; i < ui.values.length; ++i) {

      theresult(ui.values[i]);

    }

  }

});

function theresult(theresult) {

  jQuery('#response').html(theresult);


}

标签： javascriptjquery

解决方案

摆脱你的 for 循环。相反，单独调用每个结果。所以代替这个：

for (var i = 0; i < ui.values.length; ++i) {
    theresult(ui.values[i]);
}

做这样的事情：

alert(ui.values[0]);
alert(ui.values[1]);

或者，如果您需要它们都进入“响应”div，您可以单独调用它们并将它们连接为这样的字符串（而不是 for 循环或上面的两个警报）：

theresult(ui.values[0] + ',' + ui.values[1]);

其中任何一个都会为您提供个人价值。您可以将各个值保存到变量中，并将它们与旧版本进行比较，看看它们是否发生了变化。像这样：

var min = 0;
var max = 100;
jQuery('#slider' ).slider({
  min: 0,
  max: 100,
  step: 1,
  values: [0, 100],
  slide: function(event, ui) {
    var newMin = ui.values[0];
    var newMax = ui.values[1];
    if (newMin != min) {
        theresult("Minimum changed: " + newMin);
      min = newMin;
    }
    else if (newMax != max) {
        theresult("Maximum changed: " + newMax);
      max = newMax;
    }
  }
});

function theresult(theresult) {
  jQuery('#response').html(jQuery('#response').html() + '<br>' + theresult);
}

推荐阅读