如何响应Bootstrap spinner的状态变化

要响应 Bootstrap spinner 的状态变化，您可以使用 JavaScript 和 jQuery 来监听 spinner 的值变化事件

1. 首先，请确保已将 Bootstrap、jQuery 和 Popper.js 添加到项目中。在 HTML 文件的 < head> 部分添加以下 CDN 链接：

<
    link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <
    script src="https://code.jquery.com/jquery-3.6.0.min.js">
    <
    /script>
    <
    script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    <
    /script>
    <
    script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js">
    <
    /script>
    

1. 在 HTML 文件的 < body> 部分添加一个数字输入框和一个按钮，并为其分配 ID，以便于在 JavaScript 中引用：

<
    div class="container">
    
  <
    div class="row">
    
    <
    div class="col-md-6">
    
     <
    input type="number" id="spinner" class="form-control" value="0" min="0" max="100" step="1">
    
    <
    /div>
    
    <
    div class="col-md-6">
    
     <
    button id="btnSpinner" class="btn btn-primary">
    更改值<
    /button>
    
    <
    /div>
    
  <
    /div>
    
<
    /div>

1. 在 HTML 文件的` 标签内或单独的 JavaScript 文件中编写以下代码，以监听 spinner 的值变化事件：

$(document).ready(function () {
    
  // 获取 spinner 和按钮元素
  const $spinner = $("#spinner");
    
  const $btnSpinner = $("#btnSpinner");


  // 监听 spinner 的值变化事件
  $spinner.on("input", function () {
    
    const newValue = $(this).val();
    
    console.log("Spinner 的新值为:", newValue);

  }
    );


  // 为按钮添加点击事件，以便在点击时更改 spinner 的值
  $btnSpinner.on("click", function () {
    
    const currentValue = parseInt($spinner.val());
    
    const newValue = currentValue + 1;
    

    if (newValue <
= 100) {
    
      $spinner.val(newValue);
    
      console.log("Spinner 的新值为:", newValue);

    }
 else {
    
      console.log("Spinner 已达到最大值");

    }

  }
    );

}
    );
    

现在，每当您更改 spinner 的值或单击按钮时，都会在控制台中显示 spinner 的新值。您可以根据需要修改此代码以执行其他操作。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！