自定义数字微调器Bootstrap jQuery

Question

自定义数字微调器Bootstrap jQuery

3

我需要一个带有右侧上下箭头的数字输入框来选择数字，但是步长取决于值，并且值四舍五入到不同的位数（您可以在fiddle中查看示例）。

现在，我尝试了三种不同的方法：

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

我尝试了四舍五入和步长更改，但没有成功。如果只使用向上向下按钮，则可以正常工作，但是如果以2000000为例进行输入，则会显示无效。此外，这在Firefox中不起作用。当研究这个问题时，我偶然发现了Modernizr但不确定如何实现它（一旦解决主要问题，将进一步研究这个问题）

jQuery UI Spinner

无法像使用Bootstrap尝试那样使四舍五入和步骤起作用。而且，样式存在冲突，因此需要进行CSS修改。

自定义尝试

我尝试了自己的方法，如fiddle所示。我还必须添加按钮点击函数。当使用span12时，不能让该项填充容器div，原因不明。

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

我可能忽略了一个简单的方法，或者在错误的方向上进行了探索，希望有人能够帮助!

编辑*

请查看下面@rbaker86的答复，这是解决我的四舍五入和更改步骤问题的好方法。

只需要让这个在Firefox中工作就好了!

- Matt

我意识到在Firefox中无法识别HTML5标签，有没有办法修改现有的代码而不必使用第三方脚本？ - Matt

@Stano谢谢你的帮助，我想我会选择jQuery UI微调器并尝试解决CSS问题 - 可能需要开一个新问题 :/ - Matt

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rbaker86 · Accepted Answer

您的代码还可以，只需处理一下作用域问题。同时请注意，我仅使用了单个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;
});