文章/答案/技术大牛

发布

社区首页 >问答首页 >用jQuery条件更改CSS背景

问用jQuery条件更改CSS背景
EN

Stack Overflow用户

提问于 2014-11-28 22:13:42

回答 1查看 94关注 0票数 0

我正在构建一些html温度计，这些温度计是用jQuery动画显示的，以显示一个百分比(如您所看到的，我已经构建的Fiddle )。

我想要的，而且我不知道我做错了什么，就是让温度计的颜色根据它们所代表的水平改变。例如，在Fiddle的剧本中，80岁以下的应该是蓝色，80岁以上的应该是黄色，但它们都是蓝色的。

这是jQuery代码：

$('.lvl').each(function(){
    var level = $(this).text();
    $(this).animate( {
        width: level+'%'
    }, 1000);

    var lvlwidth = $(this).width();
    if (lvlwidth < 80) {
        $(this).css('background-color', 'blue');
    } else if (lvlwidth > 80) {
        $(this).css('background-color', 'yellow');
    }
});

更新:正如我在下面的评论中所说的，我想要的是条形图在增长的时候动态地改变颜色，例如，当它小于40的时候是蓝色的，然后变成黄色，当它达到80的时候变成红色。

javascript

jquery

css

conditional-statements

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-28 22:45:08

更新：

http://jsfiddle.net/rpxr4bjj/3/

$('.lvl').each(function () {
    var level = $(this).text();
    $(this).animate({
        width: level + '%',
    }, {
        progress: function () {


            if (level < 80) {
                $(this).css('background-color', 'blue');
            } else if (level > 80) {
                $(this).css('background-color', 'yellow');
            }
        }
    }, 3000);


});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27196557

复制

相似问题

问用jQuery条件更改CSS背景
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jQuery条件更改CSS背景EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jQuery条件更改CSS背景
EN