Knob multiple value is not working

Question

I am using jQuery 1.8 and aterrien's jQuery-Knob

I made a circle by with animation by a input and managing the value by rel attribute. Check following code:

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

you can check working fiddle at http://jsfiddle.net/itskawsar/U72TB/

But i need multiple circle in one page with animation and each will hold different value. So i simply duplicate the input field for multiple times and also changed value for each. But this time it is working well without changing the circle value.

As example, i have 3 inputs and each have 20, 35, 95 in rel attribute. Now when i run the script, the script make all 3 circles with animation and fill with 20. But it should be fill with 20, 35 and 95. Please help me.

Thanks in advance.

Answer 1

Place your code inside a .each function, like this:

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() + '%');
            }
        })
    }
});

Fiddle: http://jsfiddle.net/frostyterrier/wMQnk/1/

In your example it's only grabbing the first input field.

Answer 2

Change your js like this:

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() + '%');
            }
        })
    }
});