Question

继承了要运行的对象：

var content = {

book_1: {

    nameyo: "Doctor who",
    subject: "Books",
    price: "$10,000",
    tags: ["BOOK", "FUNNY", "KIDS", "STUPID"]

},

book_2: {

    nameyo: "Chica boom",
    subject: "Books",
    price: "$10,000",
    tags: ["BOOK", "FUNNY", "KIDS", "STUPID"]

},

Album_1: {

    nameyo: "Beatles",
    subject: "Music",
    price: "$10,000",
    tags: ["MUSIC", "BEATLES", "GOOD", "STUPID"]

},

Album_2: {

    nameyo: "ACDC",
    subject: "Music",
    price: "$10,000",
    tags: ["MUSIC", "ACDC", "GOOD", "STUPID"]

}

};

这里是jquery

function createIDForName(key) {
return key + "blah";
}
function createIDForType(key) {
return key + "okay";
}
function createIDForPrice(key){
return key+"stuff";
}

for (var key in content) {
    $(".row").append($("<div class=col-3>")).append($("<p class=name>")).append($("<p class=type>")).append($("<p class=price>"));


    $(".name").attr("id", createIDForName(key));

    $(".type").attr("id", createIDForType(key));

    $(".price").attr("id", createIDForPrice(key));

}

因此，当这一切都生成时，它只会为内容对象Album_2中的最后一个键执行此操作。为什么是这样？或者每次都压倒一切？如果是的话，为什么呢？任何帮助表示赞赏。

Answer 1

您也可以使用.each（）方法执行此操作。此外，我将您的createID()函数压缩为一个函数与另一个参数，并使JSON有效。 DEMO

var content = {
    'book_1': {
        'nameyo': "Doctor who",
        'subject': "Books",
        'price': "$10,000",
        'tags': ["BOOK", "FUNNY", "KIDS", "STUPID"]
    },
    'book_2': {
        'nameyo': "Chica boom",
        'subject': "Books",
        'price': "$10,000",
        'tags': ["BOOK", "FUNNY", "KIDS", "STUPID"]
    },
    'Album_1': {
        'nameyo': "Beatles",
        'subject': "Music",
        'price': "$10,000",
        'tags': ["MUSIC", "BEATLES", "GOOD", "STUPID"]
    },
    'Album_2': {
        'nameyo': "ACDC",
        'subject': "Music",
        'price': "$10,000",
        'tags': ["MUSIC", "ACDC", "GOOD", "STUPID"]
    }
};

function createID(key, type) {
    return key + type;
}

$.each(content, function(key, val){
    var col  = '<div class="col-3"><p class="name" id="' + createID(key, 'blah') + '"></p><p class="type" id="' + createID(key, 'okay') + '"></p><p class="price" id="' + createID(key, 'stuff') + '"></p></div>';
    $(".row").append(col);
});

Answer 2

在结果中，你将有几个具有相同类的dom元素：.name, .type, .price然后你得到它们并反复覆盖它们的值。所以在结果中你有最后的键值;

Answer 3

选择器$(".name")，$(".price")等匹配所有类别name的元素，而不仅仅是您刚刚添加的元素，还包括您之前添加的其他元素，所以你最终得到了所有这些值相同的值。

为避免这种情况，让生活更轻松，只需保留对元素的引用

for (var key in content) {
   var _name = $('<p />', {'class' : 'name'}); //note that window.name exists
                                               // be careful with the name "name"

   _name.attr("id", createIDForName(key));

最简单的方法是在创建元素时添加ID

for (var key in content) {
    var _col  = $('<div />', {'class' : 'col-3'}),
        _name = $('<p />', {'class' : 'name',  id : createIDForName(key)}),
        _type = $('<p />', {'class' : 'type',  id : createIDForType(key)}),
        _pric = $('<p />', {'class' : 'price', id : createIDForPrice(key)});

    $(".row").append(_col, _name, _type, _pric);
}

for循环仅适用于对象中的最后一个键

3 个答案: