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

Question

我使用的是jQuery旋钮，下面的代码如下：

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方法中值的输出，所以我们还需要方法。

因此，在您的.parse旋钮选项中添加下面的jQuery方法，就会像预期的那样开始工作了。本质上，我们要做的是检查我们的格式是否被应用。为此，我们检查值是否以%结尾。如果是这样，那么我们假设我们的格式被应用，并将值除以.1 (因为我们在format方法中乘以.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

据我所知，最初问题的原因是由于~~的库使用四舍五入。显示在小数点之后截断任何值。。

库正在执行以下操作：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的原因。因此，如上所述，解决方案是提供没有十进制值的输入(这样它们就不会被~~删除)。