使用jQuery更改div类

Question

I try to develop some charts which should have online values. I have found this nice and free dashboard : [ http://jiji262.github.io/Bootstrap_Metro_Dashboard/][1] I use Web sockets to change values of charts and it works very nice. I use justgage([ http://justgage.com/][2] ) plug-in. As you can see there are some square shapes with different colors(Disk Space Usage,Bandwidth,memory,CPU etc.) and i want to change color of these squares according to values.

Here is div construction :

<div class="span2" onTablet="span4" onDesktop="span2"> 
            <div ID="ID1" class="circleStatsItemBox green"> 
            <div class="header">Machine 1</div> 
              <span class="percent"></span> 
            <div class="circleStat">    
               <div id="g1"></div>
            </div>
            <div id="f1" class="footer">
                <span class="number">cards/hour</span>
            </div>
            </div>
</div>

g1 is justgage gauge and i use this code to change div class : (to change of square)

$('#ID1').addClass('circleStatsItemBox green').removeClass('circleStatsItemBox orange');

But this code changes title and footer color as same with body color. I want that footer and header color should be arranged according to new div class (for example according to circleStatsItemBox orange at my sample)

Thanks

Answer 1

try with toggleClass in jquery.

ToggleClass : Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

$('#ID1.circleStatsItemBox').toggleClass('orange green');

Answer 2

尝试删除后再添加：

$('#ID1').removeClass('circleStatsItemBox orange').addClass('circleStatsItemBox green');