Question

我正在尝试循环数组并打印结果如下：

<div class="photo-palette">
    <div class="photo-palette-inner" style="background-color: rgb(68, 73, 68);"></div>
    <div class="photo-palette-inner" style="background-color: rgb(54, 37, 28);"></div>
    ...
</div>

这是我的代码：

var colorThief = new ColorThief();
var image = $("#histogram-image")[0];
var palette = colorThief.getPalette(image);

for (var i = 0, len = palette.length; i < len; i++) {
    $('.photo-palette').html('<div class="photo-palette-inner" style="background-color: rgb(' + palette[i] + ');"></div>');
}

但是那个循环只会打印出来：

<div class="photo-palette">
    <div class="photo-palette-inner" style="background-color: rgb(68, 73, 68);"></div>
</div>

我看不出这个循环有什么问题！ console.log(palette)打印以下内容：

[Array[3], Array[3], Array[3], Array[3], Array[3], Array[3], Array[3], Array[3], Array[3]]
    0: Array[3]
        0: 68
        1: 73
        2: 68
        length: 3
        __proto__: Array[0]
    1: Array[3]
    2: Array[3]
    3: Array[3]
    4: Array[3]
    5: Array[3]
    6: Array[3]
    7: Array[3]
    8: Array[3]
    length: 9
    __proto__: Array[0]

你能看到问题吗？

Answer 1

.html()写了该DIV的全部内容。你需要在循环中append，否则你的最后一次迭代将是该div的唯一内容。

For循环只打印一个DIV标记。不是8个DIV标签

1 个答案: