Question

我正在使用jQuery构建基本抵押贷款计算器，需要显示一些根据滑块的当前值动态变化的值。

值是基本数学，例如显示当前滑块值的百分比或显示当前滑块值的两倍。

这里是我使用jQuery的地方，我想我需要以某种方式在最后三行执行一些数学运算以获得正确的值并在HTML元素中显示这些数据。

HTML：

<div id="slider"></div>
<p>Your slider has a value of <span id="slider-value"></span></p>
<p>Double the slider value is <span id="slider-double"></span></p>
<p>10% of the slider value is <span id="slider-percent"></span></p>

jQuery的：

$("#slider").slider({
value: 100,
min: 0,
max: 1000,
step: 1,
 slide: function(event, ui) {
$("#slider-value").html(ui.value);
}
});

$("#slider-value").html($('#slider').slider('value'));
$("#slider-double").html($('#slider').slider('value'));
$("#slider-percent").html($('#slider').slider('value'));

我正在这里处理html，其中还显示了html：https://jsfiddle.net/chlorinekid/mwydgj82/6/

有什么想法？非常感谢提前。

Answer 1

我认为你正在寻找这样的东西：

    $("#slider").slider({
        value: 100,
        min: 0,
        max: 1000,
        step: 1,
        slide: function(event, ui) {
            $("#slider-value").html(ui.value);
            $("#slider-double").html(ui.value*2 + " double");
            $("#slider-percent").html(ui.value/10 + "%");
        }
    });

    $("#slider-value").html($('#slider').slider('value'));
    $("#slider-double").html($('#slider').slider('value')*2 + " double");
    $("#slider-percent").html($('#slider').slider('value')/10 + "%");

Answer 2

如果要在选择滑块值时（滑块释放时）更新滑块受影响的值

为了在滑块中保留先前设定的值，必须使用滑块的change事件。

$('#slider').slider({
    change: function(event, ui) {
      updateSliderDouble(ui.value);
      updateSliderPercent(ui.value);
    }
});

请参考我的小提琴示例 http://jsfiddle.net/mwydgj82/29/

如果要在滑块移动时更新滑块受影响的值

在这种情况下，必须使用滑块的slide事件。

$("#slider").slider({
    value: 100,
    min: 0,
    max: 1000,
    step: 1,
    slide: function(event, ui) {
        $("#slider-value").html(ui.value);
        updateSliderDouble(ui.value);
        updateSliderPercent(ui.value);
    }
});

请参考我的小提琴示例 http://jsfiddle.net/9ousgtyd/1/

根据jQuery UI滑块

2 个答案: