Bootstrap 3中的数字上下调节器（微调控件）

Question

我试图将几个数字上下控件（数字微调器）进行转换，但我失败了。由于我正在使用bootstrap 3，因此JQuery UI微调器不是一个选项，而且我无法从fuelx独立部署微调器。

我找到了2或3个类似的控件，但它们适用于bootstrap 2。

在与CSS作斗争后，我在这里找到了一些人，他们可以做到这一点，我制作了一个fiddler用他的答案，但还是不起作用。图像没有显示。

我认为这可能与我的font awesome版本有关：

<a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-sort-down"></i>

不过我不确定。欢迎提供任何提示。

我的 fiddler 最新版本： http://jsfiddle.net/Leandro1981/wt8CD/

相关问题：

将 Bootstrap 2.3.2 和 jQuery-Spinner 转换为与 Bootstrap 3.* 兼容

针对 Bootstrap 的跨浏览器数字微调器/步进器

针对 Bootstrap 的跨浏览器数字微调器/步进器

- Leandro Bardelli

Answer 1

更好的解决方案是针对 JavaScript 部分的，因为给出的方案只支持页面上单个旋转器。

$('.spinner .btn:first-of-type').on('click', function() {
    var spinner = $(this).parent().parent().find('input');
    spinner.val(parseInt(spinner.val(), 10) + 1);
});

$('.spinner .btn:last-of-type').on('click', function() {
    var spinner = $(this).parent().parent().find('input');
    spinner.val(parseInt(spinner.val(), 10) - 1);
});

一个可能的更新是添加最小值、最大值、滚动和键盘支持。

- Cayan

---

代码正确，与@Leandro的脚本不同 - 它会更改页面上所有微调框的值。 - lewis

我刚才将你的回答标记为答案，因为我认为它比我的更好。 - Leandro Bardelli

Answer 2

可使用简单的jQuery插件实现，以下是可用代码：http://jsfiddle.net/Leandro1981/75M6s/3/

   (function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

from: http://codepen.io/Thomas-Lebeau/pen/csHqx

- Leandro Bardelli