设置值后传递给格式挂钩函数的错误值，jQuery旋钮

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 hook 中的值是 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 
     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旋钮

wrong value passed to format hook function after set value , jQuery Knob

javascript

jquery

jquery-knob