我.output
在我的on('click')
函数中创建的父元素中动态创建了元素。
$(document).on("click", '#search', function() {
//Loop crime data array from api request above...
for(var i = 0; i < mapData.length; i++) {
//Fill in crime data
var fill = '<div class="row resu"><div class="col-xs-2 number"><h5>'+[i+1]+'</h5></div><div class="col-xs-10"><p class="text-primary">Type of crime: <span class="text-strong">'+mapData[i][0]+'</span></p><p class="text-primary">Location specifics: <span class="text-strong">'+mapData[i][1]+'</span></p></div></div>';
//add to div
$('.output').append(fill);
}
...
.......
但是在函数之外的任何地方我都无法定位.resu
我可以申请的新行.empty()
或.remove()
. 每次我点击搜索按钮时,我都希望先清空输出容器 div。
如果你去我的笔前按下按钮,你会看到一些关于该邮政编码区域内犯罪的信息。如果你一直按下它,那么相同信息的多个重复将填满它。我怎样才能用jquery摆脱那些?
这是更新演示:https : //codepen.io/anon/pen/PjPJaZ
问题是,您mapData
在每次请求后都将数据添加到数组。您还需要mapData
在每次请求后重置数组。
function getPolApi(year,month,lat,lng,mapData) {
$.ajax({
url : "https://data.police.uk/api/crimes-at-location?date="+year+"-"+month+"&lat="+lat+"&lng="+lng,
type : "get",
async: false,
success : function(data) {
mapData = [];// Empty the array
for(var i = 1; i < data.length; i++) {
mapData.push([
data[i]['category'],
data[i]['location']['street']['name'],
]);
heatmapData.push(new google.maps.LatLng(data[i].location.latitude,data[i].location.longitude));
}
//Add results into view
for(var i = 0; i < mapData.length; i++) {
var fill = '<div class="row resu"><div class="col-xs-2 number"><h5>'+[i+1]+'</h5></div><div class="col-xs-10"><p class="text-primary">Type of crime: <span class="text-strong">'+mapData[i][0]+'</span></p><p class="text-primary">Location specifics: <span class="text-strong">'+mapData[i][1]+'</span></p></div></div>';
$('.output').append(fill);
}//endforloop
//Move the map into view of the heatmaps
moveMap(lat,lng);
//Add the heatmaps
addHeatMap();
mapData = [];
// console.log(mapData);
},
error: function(dat) {
console.log('error');
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句