我从一个json数据包中提取了5个变量，并将其显示在表中。我想把这五个变量加起来，形成第六个变量，然后我也可以在表中使用。
我要求和的变量是activity1distance到activity5distance，求和为activitytotaldistance
有问题的页面是https://vk7krj.com/running.html并且该表是"；Strava上的最后5项活动"；
以下是页面中的相关代码-
function toTime(seconds) {
var date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8);
}
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data)
$("#start_date_local_1").html((data[0].start_date_local).slice(0, 10))
$("#activity1type").html(data[0].type)
$("#activity1name").html(data[0].name)
$("#activity1distance").html(((data[0].distance) / 1000).toFixed(3))
$("#elevation1").html(data[0].total_elevation_gain)
$("#moving_time_1").html(toTime(data[0].moving_time))
$("#start_date_local_2").html((data[1].start_date_local).slice(0, 10))
$("#activity2type").html(data[1].type)
$("#activity2name").html(data[1].name)
$("#activity2distance").html(((data[1].distance) / 1000).toFixed(3))
$("#elevation2").html(data[1].total_elevation_gain)
$("#moving_time_2").html(toTime(data[1].moving_time))
$("#start_date_local_3").html((data[2].start_date_local).slice(0, 10))
$("#activity3type").html(data[2].type)
$("#activity3name").html(data[2].name)
$("#activity3distance").html(((data[2].distance) / 1000).toFixed(3))
$("#elevation3").html(data[2].total_elevation_gain)
$("#moving_time_3").html(toTime(data[2].moving_time))
$("#start_date_local_4").html((data[3].start_date_local).slice(0, 10))
$("#activity4type").html(data[3].type)
$("#activity4name").html(data[3].name)
$("#activity4distance").html(((data[3].distance) / 1000).toFixed(3))
$("#elevation4").html(data[3].total_elevation_gain)
$("#moving_time_4").html(toTime(data[3].moving_time))
$("#start_date_local_5").html((data[4].start_date_local).slice(0, 10))
$("#activity5type").html(data[4].type)
$("#activity5name").html(data[4].name)
$("#activity5distance").html(((data[4].distance) / 1000).toFixed(3))
$("#elevation5").html(data[4].total_elevation_gain)
$("#moving_time_5").html(toTime(data[4].moving_time))
if (data[0].distance > 0) {
$("#time_km_1").html(toTime(((data[0].moving_time) / ((data[0].distance) / 1000))).slice(3))
} else {}
if (data[1].distance > 0) {
$("#time_km_2").html(toTime(((data[1].moving_time) / ((data[1].distance) / 1000))).slice(3))
} else {}
if (data[2].distance > 0) {
$("#time_km_3").html(toTime(((data[2].moving_time) / ((data[2].distance) / 1000))).slice(3))
} else {}
if (data[3].distance > 0) {
$("#time_km_4").html(toTime(((data[3].moving_time) / ((data[3].distance) / 1000))).slice(3))
} else {}
if (data[4].distance > 0) {
$("#time_km_5").html(toTime(((data[4].moving_time) / ((data[4].distance) / 1000))).slice(3))
} else {}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
<table class="strava-stats">
<tr>
</tr>
<tr>
<td class="heading" colspan="1">Date</td>
<td class="heading" colspan="1">Type</td>
<td class="heading" colspan="1">Title</td>
<td class="heading" colspan="1">Distance</td>
<td class="heading" colspan="1">Height Gain</td>
<td class="heading" colspan="1">Moving Time</td>
<td class="heading" colspan="1">Time/Km</td>
</tr>
<tr>
<td>
<div id="start_date_local_1"></div>
</td>
<td>
<div id="activity1type"></div>
</td>
<td>
<div id="activity1name"></div>
</td>
<td>
<div><span id="activity1distance"></span> Km</div>
</td>
<td>
<div><span id="elevation1"></span>m</div>
</td>
<td>
<div id="moving_time_1"></div>
</td>
<td>
<div id="time_km_1"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_2"></div>
</td>
<td>
<div id="activity2type"></div>
</td>
<td>
<div id="activity2name"></div>
</td>
<td>
<div><span id="activity2distance"></span> Km</div>
</td>
<td>
<div><span id="elevation2"></span>m</div>
</td>
<td>
<div id="moving_time_2"></div>
</td>
<td>
<div id="time_km_2"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_3"></div>
</td>
<td>
<div id="activity3type"></div>
</td>
<td>
<div id="activity3name"></div>
</td>
<td>
<div><span id="activity3distance"></span> Km</div>
</td>
<td>
<div><span id="elevation3"></span>m</div>
</td>
<td>
<div id="moving_time_3"></div>
</td>
<td>
<div id="time_km_3"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_4"></div>
</td>
<td>
<div id="activity4type"></div>
</td>
<td>
<div id="activity4name"></div>
</td>
<td>
<div><span id="activity4distance"></span> Km</div>
</td>
<td>
<div><span id="elevation4"></span>m</div>
</td>
<td>
<div id="moving_time_4"></div>
</td>
<td>
<div id="time_km_4"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_5"></div>
</td>
<td>
<div id="activity5type"></div>
</td>
<td>
<div id="activity5name"></div>
</td>
<td>
<div><span id="activity5distance"></span> Km</div>
</td>
<td>
<div><span id="elevation5"></span>m</div>
</td>
<td>
<div id="moving_time_5"></div>
</td>
<td>
<div id="time_km_5"></div>
</td>
</tr>
<tr>
<td>
<div id=>5-day totals</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div><span id="activitytotaldistance"></span>Km</div>
</td>
<td>
<div><span id="totalelevation"></span>m</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
</tr>
</table>
</div>所以有一种模式，我相信你已经看到了，你可以重复，从而浓缩你的代码：
function toTime(seconds) {
var date = new Date(null);
date.setSeconds(seconds);
return date.toISOString().substr(11, 8);
}
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data);
/* ADDED A VARIABLE HERE CALLED AGGREGATE */
/* INITIALIZED IT TO 0 AND ADD ANOTHER NUMBER TO IT... */
let aggregate = 0;
for (let i = 0; i < 5; i++)
{
$("#start_date_local_" + (i + 1)).html((data[0].start_date_local).slice(0, 10))
$("#activity" + (i + 1) + "type").html(data[i].type)
$("#activity" + (i + 1) + "name").html(data[i].name)
$("#activity" + (i + 1) + "distance").html(((data[i].distance) / 1000).toFixed(3))
$("#elevation" + (i + 1)).html(data[i].total_elevation_gain)
$("#moving_time_" + (i + 1)).html(toTime(data[i].moving_time))
if (data[i].distance > 0) {
$("#time_km_" + (i + 1)).html(toTime(((data[i].moving_time) / ((data[i].distance) / 1000))).slice(3))
} else {}
/* HERE! (FOLLOW UP FROM PREVIOUS COMMENT) */
aggregate += Number(data[i].distance);
console.log(aggregate);
// we can get an element with document.getElementById()
// then we can use .innerHTML on the element and set it to something
the_div_element_we_want_to_add_data_to = document.getElementById("activitytotaldistance");
the_div_element_we_want_to_add_data_to.innerHTML = aggregate / 1000;
//etc etc
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
<table class="strava-stats">
<tr>
</tr>
<tr>
<td class="heading" colspan="1">Date</td>
<td class="heading" colspan="1">Type</td>
<td class="heading" colspan="1">Title</td>
<td class="heading" colspan="1">Distance</td>
<td class="heading" colspan="1">Height Gain</td>
<td class="heading" colspan="1">Moving Time</td>
<td class="heading" colspan="1">Time/Km</td>
</tr>
<tr>
<td>
<div id="start_date_local_1"></div>
</td>
<td>
<div id="activity1type"></div>
</td>
<td>
<div id="activity1name"></div>
</td>
<td>
<div><span id="activity1distance"></span> Km</div>
</td>
<td>
<div><span id="elevation1"></span>m</div>
</td>
<td>
<div id="moving_time_1"></div>
</td>
<td>
<div id="time_km_1"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_2"></div>
</td>
<td>
<div id="activity2type"></div>
</td>
<td>
<div id="activity2name"></div>
</td>
<td>
<div><span id="activity2distance"></span> Km</div>
</td>
<td>
<div><span id="elevation2"></span>m</div>
</td>
<td>
<div id="moving_time_2"></div>
</td>
<td>
<div id="time_km_2"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_3"></div>
</td>
<td>
<div id="activity3type"></div>
</td>
<td>
<div id="activity3name"></div>
</td>
<td>
<div><span id="activity3distance"></span> Km</div>
</td>
<td>
<div><span id="elevation3"></span>m</div>
</td>
<td>
<div id="moving_time_3"></div>
</td>
<td>
<div id="time_km_3"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_4"></div>
</td>
<td>
<div id="activity4type"></div>
</td>
<td>
<div id="activity4name"></div>
</td>
<td>
<div><span id="activity4distance"></span> Km</div>
</td>
<td>
<div><span id="elevation4"></span>m</div>
</td>
<td>
<div id="moving_time_4"></div>
</td>
<td>
<div id="time_km_4"></div>
</td>
</tr>
<tr>
<td>
<div id="start_date_local_5"></div>
</td>
<td>
<div id="activity5type"></div>
</td>
<td>
<div id="activity5name"></div>
</td>
<td>
<div><span id="activity5distance"></span> Km</div>
</td>
<td>
<div><span id="elevation5"></span>m</div>
</td>
<td>
<div id="moving_time_5"></div>
</td>
<td>
<div id="time_km_5"></div>
</td>
</tr>
<tr>
<td>
<div id=>5-day totals</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div><span id="activitytotaldistance"></span>Km</div>
</td>
<td>
<div><span id="totalelevation"></span>m</div>
</td>
<td>
<div id=>-</div>
</td>
<td>
<div id=>-</div>
</td>
</tr>
</table>
</div>不幸的是，我无法让/running/stava_activities.json测试我是否做出了正确的更正，但概念是存在的。我在for循环的底部留下了一个聚合，以显示如何对这些值求和。