使用 jQuery 更改 div 类答案

【问题标题】：Changing div class with jQuery使用 jQuery 更改 div 类
【发布时间】：2014-11-24 12:12:12
【问题描述】：

我尝试开发一些应该具有在线值的图表。我发现了这个漂亮且免费的仪表板： [http://jiji262.github.io/Bootstrap_Metro_Dashboard/][1] 我使用 Web 套接字来更改图表的值，它工作得非常好。我使用 justgage([http://justgage.com/][2]) 插件。如您所见，有一些具有不同颜色的正方形（磁盘空间使用情况、带宽、内存、CPU 等），我想根据值更改这些正方形的颜色。

这里是 div 构造：

<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 是justgage gauge，我使用此代码更改 div 类：（更改正方形）

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

但此代码更改标题和页脚颜色与正文颜色相同。我希望页脚和页眉颜色应根据新的 div 类进行排列（例如根据我的示例中的 circleStatsItemBox 橙色）

谢谢

【问题讨论】：

使用 jquery toggleClass 或 addClass/removeClass 方法。参考这里api.jquery.com/toggleclass

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

在添加之前尝试删除：

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

【讨论】：

请注意，您首先要删除 cirleStatsItemBox，然后再添加它。应该是$('#ID1').removeClass('orange').addClass('green');

【解决方案2】：

在 jquery 中尝试toggleClass。

ToggleClass：根据类的存在或 switch 参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。

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

【讨论】：

我通过你的帖子学习了切换功能。事实上，它会闪烁方块来警告我的用户。感谢您的努力。