Question

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

现在，我也试图添加前缀。这失败了，我无法弄清楚原因。

抛出的错误是： Uncaught TypeError：value.substring不是前缀的函数 。

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

那里有人可以提供帮助吗？

＆＃13;

$(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();

});

＆＃13;

.container {
  width: 400px;
  text-align: right;
}

label {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  padding-right: 0.4em;
}

＆＃13;

<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>

＆＃13;

提前完成了......

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微调器 - 后缀＆amp;字首

1 个答案: