jQuery UI Spinner 更改事件

jQuery UI Spinner 是一个用户友好的增量控制插件，允许用户通过按钮或键盘输入来调整数字值。它具有许多选项和回调函数，可以很容易地自定义并与其他 jQuery UI 插件集成。

在本文中，我们将学习如何使用 jQuery UI Spinner 控件的更改事件，在用户更改数字值时执行自定义代码。

准备工作

要使用 jQuery UI Spinner ，您需要首先加载 jQuery 和 jQuery UI 库。您可以从官方网站 https://jqueryui.com 下载它们，并将它们引用到您的 HTML 页面中：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

接下来，您需要创建一个包含 Spinner 控件的 HTML 元素，并设置一些选项参数：

<input id="spinner" value="0" />

<script>
  $("#spinner").spinner({
    min: -10,
    max: 10,
    step: 1
  });
</script>

此代码将创建一个带有 ID 为“spinner”的输入框，并设置其初始值为 0。它还将使用选项对象对 Spinner 控件进行配置，包括最小值、最大值和步长。

运行这段代码，您将看到一个 Spinner 控件：

更改事件

现在，我们将添加一个更改事件处理程序，以在用户更改 Spinner 中的值时执行自定义代码。您可以使用 spinchange 事件，它将在用户停止更改值时触发，并提供新值作为参数。例如：

<input id="spinner" value="0" />

<script>
  $("#spinner").spinner({
    min: -10,
    max: 10,
    step: 1,
    spinchange: function(event, ui) {
      console.log("New value: " + ui.value);
    }
  });
</script>

此代码将添加一个事件处理程序，用于在控制台打印新值。在 Spinner 中增加或减少值时，您将看到以下输出：

New value: 1
New value: 2
New value: 3

正如您所看到的，事件处理程序将在用户停止更改值时一次执行。这可以防止事件触发过于频繁。

总结

通过使用 jQuery UI Spinner 控件的 spinchange 事件，您可以在用户更改数字值时执行自定义代码。您只需将事件处理程序传递给选项对象即可。感谢您阅读本文，我希望您现在可以更好地了解 Spinner 控件的更改事件。