Question

我正在使用jQuery knob，我的代码如下：

var knobOption={//ref: https://github.com/aterrien/jQuery-Knob
    'min':0,
    'max':1,
    'width':100,
    'height':100,
    'thickness':0.1,
    'readOnly':true,//READ ONLY
    'fgColor': '#31bbff',
    //'bgColor':'#626262',
    'inputColor':'#868686',
    'change': function (v) {
        console.log("knob change:",v);
    },
    'format':function(value){//format to percentage
        console.log('fomarting knob ',value);
        if(isNaN(value)) return "-";
        else return (value*100).toFixed(1)+"%";//percentage
    },

    'draw' : function(){
        console.log("drawing",$(this).find('.knob'));
        $(this.i).css("font-size","19px");
    }
}

var $retention = this.$overviewHandler.find('#retention_wrapper');
$retention.find('#1_day .knob').knob(knobOption);
$retention.find('#3_day .knob').knob(knobOption);
$retention.find('#7_day .knob').knob(knobOption);

在此之后，我将在下面的Ajax回调中调用：

        $retention.find('#1_day .knob').val(oneDayRet).trigger('change');
        $retention.find('#3_day .knob').val(threeDayRet).trigger('change');
        $retention.find('#7_day .knob').val(sevenDayRet).trigger('change');

但在此之后，我发现format挂钩中的值为1，即使我传递的值为0.704。所以旋钮显示100％在哪里不是我想要的。

我的问题是什么？

Answer 1

我已经看过这个了。我认为你可以通过传入1到1000之间的值然后格式化来实现你想要的。

您将传入1到1000之间的值。而不是.704传入704。您的格式化行将成为： return (value*.1).toFixed(1)+"%";

您的新knobOptions将如下所示。最大值为1000，格式化方法已更改。

var knobOption={//ref: https://github.com/aterrien/jQuery-Knob
    'min':0,
    'max':1000,
    'width':100,
    'height':100,
    'thickness':0.1,
    'readOnly':true,//READ ONLY
    'fgColor': '#31bbff',
    //'bgColor':'#626262',
    'inputColor':'#868686',
    'change': function (v) {
        console.log("knob change:",v);
    },
    'format':function(value){//format to percentage
        console.log('fomarting knob ',value);
        if(isNaN(value)) return "-";
        else return (value*.1).toFixed(1)+"%";//percentage
    },

    'draw' : function(){
        console.log("drawing",$(this).find('.knob'));
        $(this.i).css("font-size","19px");
    }
}

修改

因为我们在format方法中弄乱了值的输出，所以我们还需要reverse that formatting in a .parse method。

因此，在jQuery旋钮选项中添加以下.parse方法，事情应该按预期开始工作。基本上我们想要做的是检查我们的格式是否已应用。为此，我们检查值是否以％结尾。如果确实如此，我们假设我们应用了格式并将值除以.1（因为我们在格式方法中乘以.1）。

// ... codez 'format': function(value) { if (isNaN(value)) return "-"; return (value * .1).toFixed(1) + "%"; //percentage }, 'parse': function(value) { if (typeof(value) !== 'string') return value; // if we don't have a string, then don't bother parsing if(value === '-') return value; var suffix = '%'; // see https://stackoverflow.com/a/2548133/296889 if (value.indexOf(suffix, value.length - suffix.length) === -1) return parseFloat(value); return parseFloat(value) / .1; // there is special formatting, parse and convert }, // ... more codez

据我所知，原始问题的原因是由于~~的库使用来舍入值。 The ~~ appears to truncate any values after a decimal point。

图书馆正在执行以下操作： var val = (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step; 因此，让我们快速完成.704。

(v < 0) ? -0.5 : 0.5 .704小于0.我们最终得到0.5。

0.5 + (v/this.o.step) - this.o.step是1.704除以1 + 0.5是1.204。

~~1.204 - 这会产生1。

(1) * this.o.step - this.o.step为1. 1次1仍为1.整个过程的结果为1。

这就是为什么当你输入.704时得到1。因此，如上所述，解决方案是给出没有小数值的输入（这样它们就不会被~~剥离出来。）

在设置值jQuery Knob之后传递给格式化钩子函数的错误值

1 个答案: