0

这里的想法是，提取从 SQL 提供的颜色十六进制代码并注入这些列表项中的跨度，然后使用这些十六进制代码设置它所在跨度的背景颜色。我能够将正确的信息放入数组，但我不确定我应该如何使用该数组以正确的顺序设置 backgroundColor 规则。

<ul id="color-hr">
        <li id="hr-aqua">
            <a href="Javascript:"><span></span></a>
            <ul>
                <li><a href="Javascript:"><span>70859a</span> Jetstream</a></li>
                <li><a href="Javascript:"><span>4d98b5</span> Periwinkle</a></li>
                <li><a href="Javascript:"><span>5ecfcc</span> Deep Caribean</a></li>
                <li><a href="Javascript:"><span>b6d8d5</span> Sky</a></li>
            </ul>
        </li>
</ul>

/** Color Bar **/
$("ul#color-hr > li > ul li a span").each(function (data, i) {
    $this = $(this);
    var colorArr = $this.map(function () { return $this.text() });
    var barColor = 0;

    for (var i = 0; i < colorArr.length; i++) {
        console.log(colorArr);
        $(this).css('backgroundColor', '#' + barColor);
    }

});
4

3 回答 3

3

无需循环两次。

您可以将代码更改为：

$("ul#color-hr > li > ul li a span").each(function (data, i) {
    $this = $(this);

    $this.css('backgroundColor', '#' + $this.text());
});
于 2013-09-03T18:42:41.680 回答
3

您不需要内部循环。

$("ul#color-hr > li > ul li a span").each(function (data, i) {
    $(this).css('backgroundColor', '#' + $(this).text())
});

此外，作为参考，您可能需要考虑 HTML5“data-”属性。在这种情况下，它有点多余，但可以派上用场。

<li><a href="Javascript:"><span data-bg="#70859a">70859a</span> Jetstream</a></li>

...将使用：

 $(this).css('backgroundColor', $(this).data("bg"))
于 2013-09-03T18:42:51.607 回答
2

您不需要内部循环，因为each已经循环通过它们。

//for (var i = 0; i < colorArr.length; i++) {
    //console.log(colorArr);
    $(this).css('backgroundColor', '#' + $this.text());
//}

我没有使用barColor等于 0 的值，而是将其替换为当前迭代的文本。

JSfiddle：http: //jsfiddle.net/L6Hfn/3/

于 2013-09-03T18:41:43.707 回答