jquery - jQuery 没有设置 CSS 属性

Question

var shadeAmount = 161 / $('.header').length;
        $('.header').each(function (i, e) {
            var shade = i * shadeAmount;
            var color = 'rgb(' + shade + ',' + shade + ',' + shade + ')';
            $(this).css({"background-color": color});
        });

我无法获取上面的代码来设置每个标题的背景颜色属性。如果我将代码更改为：

$(this).css({"background-color": "rgb(1,1,1)"});

有用。那么我声明颜色的方式有什么问题？

Answer 1

尝试这个...

var count = $(".header").length;
if (count) {
    var shadeAmount = parseInt(161 / count, 10);
    $('.header').each(function (i, e) {
        var shade = i * shadeAmount;
        var color = 'rgb(' + shade + ',' + shade + ',' + shade + ')';
        $(this).css({"background-color": color});
    });
}

我刚刚通过包装 in 的计算对其进行了清理shadeAmount，parseInt以确保您没有将浮点数传递给 rgb 值。

我还添加了一个检查是否存在带有标题类的元素，因为如果您在没有标题的页面上运行它，您的代码将会失败。

Answer 2

var shadeAmount = 161 / $('.header').length;
$('.header').each(function (i, e) {

    var shade = ++i * shadeAmount;

    var color = 'rgb(' + shade + ',' + shade + ',' + shade + ')';

    console.log(color);

    $(this).css({
        "background-color": color
    });
});

小提琴：http: //jsfiddle.net/2mUH2/