嗨,我想循環通過一些json數據並輸出到頁面上,我的問題是它只顯示json中的第一項(波士頓莊園停車場) 我不能得到它的顯示第二項...循環json只爲第一項工作
的jsfiddle:http://jsfiddle.net/35Jrc/6/
HTML:
<span class='showOnMap'
data-related='[
{"id":"5","slug":"boston-manor-park-car-park","name":"Boston Manor Park car park","image":"","pinType":"ub","addr":"Boston Manor Road, London ","lat":"51.48967509541307","lng":"-0.3164195004638941","contact":"Reel Film Locations: ","restrictions":"Shared use with park users. 6 classic 1960 Tower Blocks"},
{"id":"4","slug":"gunnersbury-park-car-park","name":"Gunnersbury Park car park","image":"","pinType":"ub","addr":"Popes Lane, London W3 8LQ","lat":"51.49963692687797","lng":"-0.29188622747801674","contact":"Reel Film Locations: 0845 402 2998","restrictions":"Shared use with sports ground users. Weekends in season are busy with the public. 6 classic 1960 Tower Blocks"}
]'>
click me
</span>
<div class="relatedHeader">Unit Bases near by:</div>
<div class="relatedDetails">
</div>
JS:
$('.showOnMap').click(function(){
//alert('click');
var myRelated = $(this).data('related');
createRelated(myRelated)
//addToPanel(panelData);
})
function createRelated(myRelated){
var relCount = 0;
var rowCount = 0;
var itemCount = 0;
var relCount = 0;
$.each(myRelated, function(k, v) {
if(relCount == 3){
relCount = 0;
};
// create a new row
if(relCount == 0){
var rowClass = 'relRow'+rowCount;
//alert('new row class: .'+rowClass);
$("<div></div>")
.addClass("detailRow "+rowClass)
.appendTo(".relatedDetails");
rowCount++;
}
// create a new related item div
var itemClass = 'item'+itemCount;
//alert('new item class: .'+itemClass);
$("<div></div>")
.addClass("relatedItem "+itemClass)
.appendTo('.'+rowClass);
//$('.'+rowClass).append('.'+itemClass);
// now loop through the keys and values and add the data
//add the data to the related item
$('.'+itemClass).data('location',this);
//add item to to our row
//$.each(obj, function(k, v) {
//tmp = {"id":"5","slug":"boston-manor-park-car-park","name":"Boston Manor Park car park","image":"","pinType":"ub","addr":"Boston Manor Road, London ","lat":"51.48967509541307","lng":"-0.3164195004638941","contact":"Reel Film Locations: ","restrictions":"Shared use with park users. External features unavaliable at present"};
//if(k=='image'){
$('<img/>')
.addClass('relatedImage')
.attr("src", v.image)
.appendTo('.'+itemClass)
//}
//if(k=='name'){
$('<div></div>')
.addClass('relatedTitle')
.html(v.name)
.appendTo('.'+itemClass)
//}
//});
itemCount++;
relCount++;
});
};
你'VAR rowClass'是本地循環的每個迭代。它只在'relCount'爲0時設置,否則不確定。 – 2013-03-14 19:32:50
感謝我把主循環之外的'relCount'定義爲現在雖然仍然不顯示我的json中的第二項... – 2013-03-14 19:42:34
您是否在需要時更新'rowClass'的值?因爲我在'$ .each'之前移動了'var rowClass',並且我看到2個項目:http://jsfiddle.net/35Jrc/7/ – 2013-03-14 20:02:43