Question

信息

我想在微调器的值更改时更新按钮中的文本。在这里，我需要向微调器添加2个事件。 change事件和spin事件。当用户按下按钮（例如，添加+10值或-10值）时，将触发change事件。当用户单击spin以添加+1或-1值时，将触发ui-spinner-buttons事件。我有以下代码来更新按钮的文本：

代码

var spinner = $("#spinnerTool").spinner(
    {
        change: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        },
        spin: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        }
    }
);

$("#plusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue + 10);
});

$("#minusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue - 10);
});

//HTML
<div id="spinner">
    <button id="minusTen" type="button">- 10</button>
    <input id="spinnerTool" name="value" value="1" min="1">
    <button id="plusTen" type="button">+ 10</button>
</div>

问题

当按下按钮并触发change事件时，带有值的正确文本位于按钮内（例如“ Pay€10”），但是当按下ui-spinner-buttons并按下{ {1}}事件被触发，按钮内的值总是落后1步。因此，如果微调框内的值为3，则按钮内的文本显示为“支付2欧元”。

为什么在spin事件中而不是在spin事件中发生这种情况，我该如何解决呢？

Answer 1

很明显，在将当前值增加或减少1之前调用了spin事件。因此，在将当前值增加或减小之后，我将代码更改了代码中的按钮文本，称为函数。像这样：

$('.ui-spinner-up').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

$('.ui-spinner-down').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

Answer 2

使用停止事件：

var spinner = $("#spinnerTool").spinner(
{
   stop: function (event, ui) {
      //alert("Current = " + $("#spinnerTool" ).spinner("value")) ;
      $("#payCoinsBtn").html('Pay €' + $(this).val());
   },
    ...             }
});

jQuery Spinner Spin事件的值被延迟

2 个答案: