javascript - JQuery append() 从第一次调用开始就不起作用

Question

这是带有方法的代码

var view = {
drawColorBoxes: function (colors) {
    var colorField = $('.colors');

    if (colorField.length <= 0) {
        $('.thumbnails').after('<ul class="colors"></ul>');
    }
    $.each(colors, function (color) {
        console.log(color);
        colorField.append('<li class="colorbox"></li>');
    });
},

    markSelected: function (color_id) {

    },
};

页面加载后方法drawColorBoxes(colors)星星正常工作:它创建 <ul class="colors"></ul>但之后在$.each追加不起作用。 console.log显示数据已正确接收。没有出现异常，后面程序使用时效果很好。

Answer 1

问题是当找不到元素时colorField为空，因此追加将不起作用。

试试这个

var view = {
drawColorBoxes: function (colors) {
    var colorField = $('.colors');

    if (colorField.length <= 0) {
        $('.thumbnails').after('<ul class="colors"></ul>');
        colorField = $('.colors'); // You need to reassign/initialize colorField.
    }
    $.each(colors, function (color) {
        console.log(color);
        colorField.append('<li class="colorbox"></li>');
    });
},

    markSelected: function (color_id) {

    },
};