Question

function createList() {
var list = '';
var listID;
$.each(obj_JSON.colors, function(index, value) {
    listID = "clr_" + index;
    list = list + "<div id=" + listID + " alt='" + obj_JSON.colors[index].name + "'></div>"
    clrList.html(list);
    updateListColours(listID);
});

}

function updateListColours(x) {
    $('#' + x).css({"background-color":"rgb(255, 0, 0)", "height":"25px", "width":"25px"});
}

当我看到它被创建时。第一个div获得应用于它的样式。然后第二个被创建，样式从第一个div中删除并应用到第二个div，它继续直到列表完成...

为什么会发生这种情况？如何将风格应用于每个div？ 期待答案显示我已经像往常一样做了一些非常愚蠢的事情

Answer 1

因为这一行clrList.html(list);，您要删除前一个元素，然后添加新创建的。

相反，请使用：

$.each(obj_JSON.colors, function(index, value) {
    listID = "clr_" + index;
    list = "<div id=" + listID + " alt='" + obj_JSON.colors[index].name + "'></div>"
    clrList.append(list);
    updateListColours(listID);
});

Answer 2

有一个更简单的解决方案：

function createList() {
    $.each(obj_JSON.colors, function() {
        var d = document.createElement('div');
        d.setAttribute("alt",this.name);
        d.className = "listcolour";
        clrList.appendChild(d);
        // ^ assumes `clrList` is a DOM node, not a jQuery object
    });
}

和CSS：

.listcolour {
    width: 25px;
    height: 25px;
    background-color: #f00;
}

jQuery .css（）不更新元素

2 个答案: