我需要在$ .get调用中引用我拥有的JSON数据变量。
我有JSON数据被拉入然后被处理。
我有一些复选框,我想用它来显示和隐藏标记。我有一个显示和隐藏功能,复选框的点击事件 - 位于标记的forloop下方。
我遇到的问题只是第一个复选框显示并隐藏所有标记,所有其他复选框都不执行任何操作。
我确保HTML输出正确,当我在show或hide函数上执行console.log()时,看到正在显示的函数中拉入的值。所以问题似乎与show和hide函数中的forloop有关。 可能没有正确引用数据或位置var。
有关如何正确引用它的任何帮助都会很棒。
// JSON feed
$.get(mapURL + 'map/locations', function(result) {
var locations = $.parseJSON(result);
// Markers
var markers = [];
// Looping through the JSON data
for (var i = 0, length = locations.length; i < length; i++) {
var data = locations[i];
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.long),
map: map,
title: data.title,
icon: iconSrc[data.category]
});
markers.push(marker);
}// END for loop
/** Shows all markers of a particular category, and ensures the checkbox is checked **/
function show(category) {
console.log('show ' + data.category);
for (var i=0; i<locations.length; i++) {
if (data.category == category) {
markers[i].setVisible(true);
}
}
}// END function show
/** Hides all markers of a particular category, and ensures the checkbox is cleared **/
function hide(category) {
console.log('hide ' + data.category);
for (var i=0; i<locations.length; i++) {
if (data.category == category) {
markers[i].setVisible(false);
}
}
}// END function hide
/** Action when checkbox is clicked **/
$(".checkbox").click(function(){
var cat = $(this).attr("value");
// If checked
if ( $(this).is(":checked") ){
show(cat);
}
else {
hide(cat);
}
});
});
答案 0 :(得分:1)
这不是因为您没有在循环中声明data
而发生的吗?它应该是
function show(category) {
console.log('show ' + data.category);
for (var i=0; i<locations.length; i++) {
var data = locations[i]; // <---- missing line
if (data.category == category) {
markers[i].setVisible(true);
}
}
}
(或类似的东西)
您的代码产生了这样的效果,因为data
变量“泄漏”了之前的循环。