Question

我通过输入创建了一个圆圈，并通过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个输入，每个输入在rel属性中有20,35,95。现在，当我运行脚本时，脚本会使用动画制作所有3个圆圈并填充20个。但是应该填充20,35和95.请帮助我。

提前致谢。

Answer 1

将代码放在.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/

在你的例子中，它只抓取第一个输入字段。

Answer 2

像这样改变你的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() + '%');
            }
        })
    }
});

旋钮多值不起作用

2 个答案: