jQuery UI 微调器 - 后缀和前缀

Question

我看到可以在小部件功能的帮助下向 jQuery UI 微调器添加后缀。

现在，我也尝试添加前缀。这失败了，我不知道为什么。

抛出的错误是：Uncaught TypeError: value.substring is not a function for the prefix.

我正在使用 jQuery v1.12.4 和 jQuery UI v1.12.1.

有没有人可以提供帮助？

$(document).ready(function() {

  $('.spinner1').spinner();

  $.widget('ui.suff_spinner', $.ui.spinner, {
    _format: function(value) {
      return value + 'test';
    },
    _parse: function(value) {
      return parseInt(value);
    }
  });
  $('.spinner2').suff_spinner();

  $.widget('ui.pref_spinner', $.ui.spinner, {
    _format: function(value) {
      return 'test' + value;
    },
    _parse: function(value) {
      return parseInt(value.substring(4));
    }
  });
  $('.spinner3').pref_spinner();

});

.container {
  width: 400px;
  text-align: right;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  padding-right: 0.4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container"><label for="spinner2">Normal spinner</label><input name="spinner1" id="spinner1" class="spinner1" /></div>
<div class="container"><label for="spinner1">Spinner with suffix</label><input name="spinner2" id="spinner2" class="spinner2" /></div>
<div class="container"><label for="spinner3">Spinner with prefix</label><input name="spinner3" id="spinner3" class="spinner3" /></div>

提前致谢...

Answer 1

问题是 _parse 被调用了 2 次，一次进行计算，一次更改 aria-valuenow属性。所以第一次有一个子字符串，但第二次没有。

您可以使用正则表达式使其更加灵活。例如：

$(document).ready(function() {

  $('.spinner1').spinner();

  $.widget('ui.suff_spinner', $.ui.spinner, {
    _format: function(value) {
      return value + 'test';
    },
    _parse: function(value) {
      return parseInt(value);
    }
  });
  $('.spinner2').suff_spinner();

  $.widget('ui.pref_spinner', $.ui.spinner, {
    _format: function(value) {
      return 'test' + value;
    },
    _parse: function(value) {
      let regexp = /\-?\d+/.exec(value)
      return  regexp ? parseInt(regexp[0]) : NaN;
    }
  });
  $('.spinner3').pref_spinner();

});

.container {
  width: 400px;
  text-align: right;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  padding-right: 0.4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container"><label for="spinner2">Normal spinner</label><input name="spinner1" id="spinner1" class="spinner1" /></div>
<div class="container"><label for="spinner1">Spinner with suffix</label><input name="spinner2" id="spinner2" class="spinner2" /></div>
<div class="container"><label for="spinner3">Spinner with prefix</label><input name="spinner3" id="spinner3" class="spinner3" /></div>

jQuery UI 微调器 - 后缀和前缀

jQuery UI spinner - suffix & prefix

jquery

prefix

spinner

suffix