Question

我有一个列表，我正在尝试使用rgb颜色代码动态增加颜色代码，而不是使用li：nth child css。

$(document).ready(function(){
var items = $('#navigation li');
 var colorCode =0;
items.each(function (i, e) {
     colorCode++;  
     alert(colorCode)
    $(this).css("background-color", "rgb( "+colorCode + "," + colorCode + "," + colorCode + ")");
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="navigation">
    <li>
     hello
    </li>
    <li>
     hello123
    </li>
    <li>
    hello345
    </li>
    <li>
   hello456
    </li>
  </ul>
</nav>

问题是计数器颜色代码正在增加，但它显示所有li元素的黑色。

Answer 1

如果您使用某个浏览器dev tools查看<li>元素，您会发现根据您的算法正确设置了颜色样式 - 只是颜色与黑色太相似，所以它们看起来都是黑色的。

您可以看到，如果为每个颜色部分添加1个以上，颜色的变化将变为可见。

您还可以在数组中定义颜色，您的函数可以返回您定义的i-th颜色;定义好看的配色方案可能比手动计算颜色值更容易。

＆＃13;

$(document).ready(function(){
var items = $('#navigation li');
 var colorCode =0;
items.each(function (i, e) {
     colorCode += 64;  
    $(this).css("background-color", "rgb( "+colorCode + "," + colorCode + "," + colorCode + ")");
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="navigation">
    <li>
     hello
    </li>
    <li>
     hello123
    </li>
    <li>
    hello345
    </li>
    <li>
   hello456
    </li>
  </ul>
</nav>

＆＃13;

Answer 2

正如我在评论中所说，你需要更多元素才能看到颜色。我在简单示例中使用了255个元素，因此您可以全部看到它们：

＆＃13;

$(document).ready(function() {
    for(var i = 0; i < 255; i++) {
        $('#navigation li').first().clone().appendTo('#navigation');
    }

    var colorCode = 0;

    $('#navigation li').each(function (i, e) {
        colorCode++;
        $(this).css("background-color", "rgb( "+colorCode + "," + colorCode + "," + colorCode + ")");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul id="navigation">
        <li>hello</li>
    </ul>
</nav>

＆＃13;

使用jquery动态增加颜色代码

2 个答案: