Search code examples
jqueryjquery-knob

Using jQuery Knob I want to toggleClass when value increases

I am using the jQuery knob (http://anthonyterrien.com/knob/) and trying to trigger a 'toggleClass' event on a series of divs when the value of the dial is >=10, >=20, >=30 etc

Using this I can see the value in the console

$(".dial").knob({
    'change' : function (v) { console.log(v); }
});

But I want to know how - and where in the code - I can trigger the following when the value is >=10

$("#eq-1").toggleClass('active');

And then this when the value is >=20

$("#eq-2").toggleClass('active');

etc...

Am I right in assuming that using toggleClass means that the class is remove when the value falls below the breakpoints again ?

Solution

  • The argument provided to the change event handler is the current value set in the knob control. As such you just need to provide a boolean to toggleClass() to determine whether the class should be added or removed. Try this:

    $(".dial").knob({
  'change': function (v) { 
    $("#eq-1").toggleClass('active', v >= 10);
    $("#eq-2").toggleClass('active', v >= 20);
  }
});