經常在商城或汽車系統裡可以看到很多商品對比或車型對比的頁面,最近做項目也遇到了這樣的需求,想到了一種實作思路,如果大家有什麼更好的辦法,不惜賜教。
1.實作基礎:擴充prototype,實作通過索引來通路josn對象屬性字段。
2.思路分析:這裡的内容對比,假定對比的字段都是固定的,也就是說參與對比的幾個對象所擁有的字段都是一樣的。
①建好對比内容架構,固定表格對比字段,比如像這樣:
這裡通過col和row分别對應josn對象裡的第幾個對象的第幾個字段。
②通過ajax方式,取得将要對比的内容的josn資料格式。
③通過對josn對象的分析,利用js循環為每個單元格指派,僞代碼:
for (var r = 0; r <fieldcount ; r++) { //fieldcount 對比josn對象的字段數
for (var c = 1; c < cmplist.length; c++) { //cmplist對比josn集合
elem = "#field_r" + r + "_c" + c;
$(elem).html(cmplist[c][r]); //第幾個對象的地幾個字段值
}
}
2011年9月19日17:26:58 附加:
更好的周遊josn的方法,利用jquery的each方法:
var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
alert(this);
});
輸出:one two three four five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
輸出:1 4 7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
輸出:1 2 3 4 5
寫了幾個例子,運作一下看看就明白啦!很簡單吧!