Question

从各种堆栈溢出问题我已经设法将我的滑块放到我想要的位置，即带有输出加号和减号的滑块

我遇到的问题是，如果我想更多次显示输出，拖动滑块可以正常工作，但如果我使用加号和减号，它就会落后一个数字。

HTML

<div class="container">
    <div id="minus1" class="minus"><span>-</span></div>
    <div id="plus1" class="plus">+</div>
    <p>
        <input type="text" id="amount_money" style="border:0; color:#ff0000; font-weight:bold;" disabled>
    </p>
    <div id="slider_1"></div>
    <div class="test">0</div>
    <div class="test">0</div>
</div>

JS

function changeValue() {
    var something = weightSliderValueNew;
    $(".test").html("£" + addCommas(something));
}

$("#slider_1").slider({
    range: "min",
    min: 0,
    max: 300000,
    step: 50000,
    animate: true,
    create: function(event, ui) {
        $("#amount_money").val("£0");
    },
    change: function(event, ui) {
        $("#amount_money").val("£" + addCommas(ui.value));
        $('#slider_1').addClass('red');
    },
    slide: function(event, ui) {
        weightSliderValueNew = ui.value;
        changeValue(weightSliderValueNew);
    }
});

$("#plus1").click(function(event, ui) {
    var value = $("#slider_1").slider("value");
    var step = $("#slider_1").slider("option", "step");
    $("#slider_1").slider("value", value + step);

    weightSliderValueNew = value;
    changeValue(weightSliderValueNew);   
});

$("#minus1").click(function() {
    var value = $("#slider_1").slider("value")
    var step = $("#slider_1").slider("option", "step");
    $("#slider_1").slider("value", value - step);

    weightSliderValueNew = value;
    changeValue(weightSliderValueNew);    
});

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/awig/o9hkdupu/2/

Answer 1

问题是因为您的weightSliderValue会根据触发的事件进行不同的修改。一个更简单的模式是直接从滑块读取值并消除对全局变量的需要。

您还可以稍微整理一下逻辑，以便changeValue()在所有事件下完成所有更新。试试这个：

function changeValue() {
    var value = '£' + addCommas($('#slider_1').addClass('red').slider("option", "value"));
    $(".test").html(value);
    $("#amount_money").val(value);
}

$("#slider_1").slider({
    range: "min",
    min: 0,
    max: 300000,
    step: 50000,
    animate: true,
    create: changeValue,
    change: changeValue,
    slide: changeValue
});

Updated fiddle

带有加号和减号的jQuery滑块值

1 个答案: