0

これがアイデアです。SQL から提供され、これらのリスト項目のスパンに挿入されたカラー 16 進コードをプルし、それらの 16 進コードを使用して、スパンの背景色を設定します。適切な情報を配列ですが、その配列で正しい順序で 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

2 回ループする必要はありません。

コードを次のように変更できます。

$("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 に答える