在仅环适用于最后一个关键的对象

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); 
}