0

我正在使用 jQuery 1.8 和aterrien 的 jQuery-Knob

我通过输入动画制作了一个圆圈，并通过rel属性管理值。检查以下代码：

<input class="knob" data-readOnly=true type="text" data-width="100" data-bgColor="#e0e0e0" data-thickness=".4" rel="75" value="0">

您可以在http://jsfiddle.net/itskawsar/U72TB/检查工作小提琴

但是我需要在一页中有多个圆圈，每个圆圈都有不同的值。所以我只是多次复制输入字段，并更改了每个字段的值。但是这次它在不改变圆值的情况下运行良好。

例如，我有 3 个输入，每个输入都有 20、35、95 的rel属性。现在，当我运行脚本时，脚本使所有 3 个圆圈都带有动画并填充 20。但它应该填充 20、35 和 95。请帮助我。

提前致谢。

4

2 回答 2

2

将您的代码放在 .each 函数中，如下所示：

var myColor = 'rgba(41,100,159,.5)';

$('.knob').each(function(){

    var self = $(this);

    self.knob({
        'fgColor': myColor,
    });

    if(self.val() == 0)
    {   
        $({value: 0}).animate({value: parseInt(self.attr("rel"))}, {
            duration: 2000,
            easing:'swing',
            step: function()
            {
                self.val(Math.ceil(this.value)).trigger('change');
                self.val(self.val() + '%');
            }
        })
    }
});

小提琴：http: //jsfiddle.net/frostyterrier/wMQnk/1/

在您的示例中，它仅获取第一个输入字段。

于 2013-04-24T20:11:55.287 回答
1

像这样改变你的js：

var myColor = 'rgba(41,100,159,.5)';
$(".knob").knob({
    'fgColor' : myColor,
});
$('.knob').each(function() {
    var dis = this;
    if ($(dis).val() == 0) {
        $({
            value : 0
        }).animate({
            value : parseInt($(dis).attr("rel"))
        }, {
            duration : 2000,
            easing : 'swing',
            step : function() {
                $(dis).val(Math.ceil(this.value)).trigger('change');
                $(dis).val($(dis).val() + '%');
            }
        })
    }
});
于 2013-04-24T20:12:19.730 回答