我正在使用 JQVMap 来显示国家/地区。
如果国家/地区悬停,它会通过 ajax 显示计数,这是正确的。
问题是当我快速悬停许多国家时,它会附加到我停下来的一个标签中,所以基本上它会“堆叠”标签。
例子:
我一次悬停了太多国家。例如,我在意大利停留,所有“学校计数”都将附加到那里。
这是我的JS代码
$(document).ready(function(){
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
onLabelShow: function (event, label, code) {
if(sample_data[code] > 0) {
//console.log(code);
$.getJSON('/ajax/admin/ajaxcallpage', {country_key: code}, function(data) {
//var school_count = 0;
school_count = data;
label.append(': ' + school_count + ' Schools');
});
}
}
});
});
最佳答案
这个问题是因为所有的 AJAX 请求仍然被触发,一旦它们完成,所有的结果都被添加到标签中。您可以通过在 $.getJSON
返回的 jqXHR
上调用 abort()
来取消之前的请求。试试这个:
var lastRequest; // variable to store the previous request
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
onLabelShow: function (event, label, code) {
if (sample_data[code] > 0) {
lastRequest && lastRequest.abort(); // abort the previous request
lastRequest = $.getJSON('/ajax/admin/ajaxcallpage', {
country_key: code
}, function(data) {
school_count = data;
label.append(': ' + school_count + ' Schools');
});
}
}
});
关于javascript - JQVMap - Ajax 悬停调用,标签问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34419442/