Question

我试图在滑动JQuery UI滑块时获取多个值。基本上根据滑块的数量更改3个不同的值。在这种情况下，我使用的是100,000美元到2,000,000美元的范围。然后我想根据滑块的位置计算3个不同的值对于第一个值，我想获得6％ - （2.7％+ $ 2799）。第二个值是6％ - 5299美元。第三个值是6％ - 3799美元这就是我到目前为止所做的：

<div id="slider">
<div id="slider-min">$100,000</div>
<div id="slider-max">$2,000,000</div>
</div>
<input id="amount" readonly type="text">
<div class="options-wrap">
<input id="result1" readonly type="text">
<input id="result2" readonly type="text">
<input id="result3" readonly type="text">
</div>

JS

$(function() {
$( "#slider" ).slider({
  range: 'min',
  value: 100000,
  min: 100000,
  max: 2000000,
slide: function( event, ui ) {
   $( "#amount" ).val( "$" + addCommas(ui.value.toString()));
  }
});
$('#amount')
.val( "$" + addCommas($("#slider").slider("value")));
///  Need to add a function(s) that would change the values of
///  the following selectors $('#result1'),$('result2') and $('result3')
///  based on the position of the slider with the calculation stated above.
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
});

我尝试了不同的方法来在滑动滑块时更改这3个值，但是我在每次尝试时都感到沮丧。我必须承认我不是专家，我非常尊重那些对这个领域有更好了解的人。任何帮助都会非常感激。

Answer 1

JQUERY：

$(function () {
$("#slider").slider({
    range: 'min',
    value: 100000,
    min: 100000,
    max: 2000000,
    slide: function (event, ui) {
        $("#amount").val("$" + addCommas(ui.value));
        $("#result1").val("$" + addCommas(Math.round(ui.value*.06 - (.027+ 2799))));
        $("#result2").val("$" + addCommas(Math.round(ui.value*.06 -5299)));
        $("#result3").val("$" + addCommas(Math.round(ui.value*.06 -3799)));
    }
});
$('#amount')
    .val("$" + addCommas($("#slider").slider("value")));
///  Need to add a function(s) that would change the values of
///  the following selectors $('#result1'),$('result2') and $('result3')
///  based on the position of the slider with the calculation stated above.
function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

}）;

研究：http://jsfiddle.net/eqnLc9fg/1/

JQuery UI滑块设置多个输入值

1 个答案: