为页面上的所有 Web 部件分配颜色的 JavaScript

Question

想要定义一个 JavaScript 函数，我可以传入一些颜色，它将使用这些颜色将 Web 部件标题设置为这些颜色。

伪代码将循环遍历我的 Web 部件(仅具有可见标题的那些)并忽略那些没有可见标题的。每个可见标题都将分配给作为参数提供的颜色数组中的下一个颜色。

如果传递了两种颜色，那么第一个可见的 Web 部件标题将使用颜色 1，第二个可见的 Web 部件标题将使用颜色 2，第三个将使用颜色 1， 等等..

$('#WebPartWPQ6_ChromeTitle').css('background-color', 'red');

我希望实现是:

<script type="text/javascript" data-Color="red, blue, black" src="../SiteAssets/js-enterprise/ColorHeaders.js"></script>

Answer 1

以下代码供大家引用。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    var colors=["red","blue","black"];
    $(".ms-webpart-chrome-title").each(function(i){     
        $(this).css('background-color',colors[i%colors.length]);
    });
});
</script>