jquery - 自定义数字微调器 Bootstrap jQuery

Question

我需要一个数字输入，右侧带有向上向下箭头来选择数字。但是，步长会根据值而变化，并且值会舍入到不同的位置(您可以看到示例的 fiddle )。

现在我尝试了 3 种不同的方法:

Bootstrap - type="number" = 首选方法

我尝试过舍入和步长更改，但没有成功。如果我只使用向上向下按钮，它就可以工作，但是如果我输入 2000000 作为示例，它会显示它无效。此外，这在 Firefox 中不起作用。在研究这个问题时，我遇到了Modernizr，但不确定如何实现它(一旦主要问题得到解决，我会进一步研究这个问题)

jQuery UI 微调器

无法真正让舍入和步骤像 Bootstrap 尝试一样工作。此外，样式冲突，因此需要修改 CSS。

自定义尝试

我尝试了自己的方法，如 fiddle 所示。我仍然需要添加按钮点击的功能。由于某种原因，使用 span12 时无法填充容器 div。

My (failed) results so far: http://jsfiddle.net/rZyZW/

我可能忽略了一个简单的方法，或者走错了方向，希望有人可以提供帮助!

EDIT*

Check out @rbaker86's response below, great solution to my issue with rounding and changing the step.

Just need to get this to work with Firefox!

Answer 1

你的代码没问题。它只需要整理范围。另请注意，我只使用了一个 jQuery 选择器。

试试这个:http://jsfiddle.net/rZyZW/1/

$("#test").change(function(){
    $self = $(this);
    var val = $self.val();

    if(val < 200){
        $self.prop('step','50');
        $self.val('200');
    }else if(val < 1000){
        $self.prop('step','50');
        $self.val(Math.round(val/50)*50);
    }else if(val > 1000 & val < 10000){
        $self.prop('step','100');
        $self.val(Math.round(val/100)*100);
    }else if(val > 10000 & val < 50000){
        $self.prop('step','250');
        $self.val(Math.round(val/250)*250);
    }else if(val > 50000 & val < 100000){
        $self.prop('step','500');
        $self.val(Math.round(val/500)*500);
    }else if(val > 100000){
        $self.prop('step','1000');
        $self.val(Math.round(val/1000)*1000);
    }
    return false;
});