我从last question继续了我的项目。
现在,它几乎可以按照我想要的方式进行所有操作。
该网站的基本功能是遍历World of Tanks API,以创建显示我们氏族拥有的省份的卡片。
因此,我使用以下for循环来创建卡。
function loopProvince(provinces, jsonData) {
for (i = 0; i < provinces.length; i++) {
createCard(i);
getMaps(jsonData[clan_id][i].arena_id, i);
changeProvinceDetails(jsonData[clan_id], i + 1);
}
}
这里的问题是,如果我们拥有15个省(因此脚本应产生15张卡),它将创建15张满卡和一张空的第16张卡。
我想知道如何删除第16张卡或完全停止创建它。
完整代码为:
//var clan_id = 500071433;
var clan_id = 500025989; // FAME
// Get province ID
//TODO: ein Feld zu viel --> Entfernen
var province_list = "https://api.worldoftanks.eu/wot/globalmap/clanprovinces/?application_id=bbdd3a54ffe280ff581db61299acab9c&clan_id=" + clan_id + "&fields=province_name%2C+province_id%2C+arena_id%2C+clan_id%2C+daily_revenue%2C+max_vehicle_level%2C+prime_time%2C+front_id";
// Get JSON Data
fetch(province_list)
.then(res => res.json())
.then((out) => {
loopProvince(out.data[clan_id], out.data);
})
.catch(err => {
throw err
});
function loopProvince(provinces, jsonData) {
for (i = 0; i < provinces.length; i++) {
createCard(i);
getMaps(jsonData[clan_id][i].arena_id, i);
changeProvinceDetails(jsonData[clan_id], i + 1);
}
}
function createCard(i) {
var card = `
<div class="province" id="province` + (i + 1) + `">
<div class="province_title" id="province_name` + (i + 1) + `">
<h2>Provinz ` + (i + 1) + `</h2>
</div>
<div class="province_information">
<div class="map_name" id="province_map` + (i + 1) + `">
<p>Map Name</p>
</div>
<div class="details">
<div class="time" id="province_time` + (i + 1) + `">
<p>Prime Time: XX:XX Uhr</p>
</div>
<div class="tier" id="province_tier` + (i + 1) + `">
<p>Stufe: X</p>
</div>
<div class="income" id="province_income` + (i + 1) + `">
<p>Einkommen: X/Tag</p>
</div>
</div> <!-- details -->
</div>
</div>
`;
document.getElementById('contentid').innerHTML += card;
}
function getMaps(arena_id, i) {
fetch('./data/maps.json')
.then((res) => res.json())
.then((jsonMap) => {
changeProvinceMap(jsonMap.data[arena_id].name_i18n, jsonMap.data[arena_id].minimap_location, i);
})
}
// start changing information
function changeProvinceDetails(json, i) {
changeProvinceName(json[i].province_name, i);
changeProvinceIncome(json[i].daily_revenue, i);
changeProvinceTier(json[i].max_vehicle_level, i);
changeProvinceTime(json[i].prime_time, i);
}
function changeProvinceName(province_name, i) {
document.getElementById("province_name" + i).innerHTML = "<h2>" + province_name + "</h2>";
}
function changeProvinceMap(province_map, province_minimap, i) {
document.getElementById("province_map" + i).innerHTML = "<p>" + province_map + "</p>";
document.getElementById("province_map" + i).setAttribute("style", "background:url(" + province_minimap + "); background-size:cover; background-position:center;");
}
function changeProvinceIncome(province_income, i) {
document.getElementById("province_income" + i).innerHTML = "<p>Einkommen: " + province_income + " / Tag </p>";
}
function changeProvinceTier(province_tier, i) {
document.getElementById("province_tier" + i).innerHTML = "<p>Stufe: " + province_tier + "</p>";
}
function changeProvinceTime(province_prime_time, i) {
document.getElementById("province_time" + i).innerHTML = "<p>Prime Time: " + province_prime_time + " Uhr</p>";
}
body {
background: #EBEBEB;
font-family: sans-serif;
color: #343434;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas: "head" "information" "copyright";
height: 100vh;
grid-gap: 50px;
}
header {
display: grid;
background: #343434;
border-bottom: #ACACAC 5px solid;
}
#title {
grid-area: head;
padding: 20px;
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
color: #ffffff;
}
.content {
grid-area: information;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
grid-gap: 20px;
align-items: start;
}
.province {
background: #ACACAC;
display: grid;
grid-template-rows: auto 300px;
}
.province_title {
display: grid;
align-items: center;
justify-items: center;
background: #343434;
color: #ffffff;
}
.province_information {
height: minmax(200px, auto);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "map details";
}
.province_information p {
margin: 0;
padding: 0;
}
.province_information .map_name {
grid-area: map;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-weight: bold;
color: #343434;
background: white;
background-position: center;
background-size: cover;
}
.province_information .map_name>p {
background: #ffffff;
padding: 5px;
}
.province_information .details {
grid-area: details;
padding: 10px;
padding-right: 0;
display: grid;
grid-gap: 5px;
align-items: center;
}
.province_information .details .time {
font-weight: bold;
text-align: center;
font-size: 20px;
}
footer {
padding: 10px;
gird-area: copyright;
background: #343434;
border-top: #ACACAC 3px solid;
color: #ffffff;
}
/*
__ __ _ _
____ | \/ | | (_)
/ __ \| \ / | ___ __| |_ __ _
/ / _` | |\/| |/ _ \/ _` | |/ _` |
| | (_| | | | | __/ (_| | | (_| |
\ \__,_|_| |_|\___|\__,_|_|\__,_|
\____/
*/
@media (max-width: 600px) {
.container {
grid-gap: 20px;
}
.content {
grid-area: information;
display: grid;
grid-template-columns: minmax(70%, 1fr);
grid-gap: 20px;
align-items: start;
justify-items: stretch;
}
.province_information {
height: minmax(200px, auto);
display: grid;
grid-template-columns: 1fr;
grid-template-row: 1fr 1fr;
grid-template-areas: "map" "details";
}
#title {
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WOT Clan Wars Dashboard</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="javascript/main.js"></script>
</head>
<body>
<div class="container">
<header "head">
<div id="title">
<h1>Clan Wars Dashboard</h1>
</div>
</header>
<div class="content" id="contentid">
<!-- generated by JavaScript -->
</div>
<!-- content -->
<footer>
Copyright © 2018 Kay Kleinvogel
</footer>
</div>
</body>
</html>
背景图片在这里不起作用,因为它们已保存在本地。
对于包括maps.json和图像的所有文件,只需查看Github page。
很抱歉,如果代码混乱,因为这是我的第一个Web项目,比基本教程要大。
感谢您的帮助:)
答案 0 :(得分:0)
您是否尝试过执行“ i
答案 1 :(得分:0)
数组是从零开始的,因此您的数组索引从0-14开始。 length属性为15,因此您的for循环正在运行,直到它在索引15处查找该项目。
如果对这些事情有疑问,请在循环内运行console.log(i)语句,您将看到它返回的所有内容的索引。
希望有帮助:-)
答案 2 :(得分:0)
您实际上有16个来自API的地图。问题是您在设置每张卡的详细信息时会跳过第一个。
changeProvinceDetails(jsonData[clan_id], i + 1);
那里的i+1
跳过了第一个索引。您可以通过从json获取信息时减去一来弥补这一点。
function changeProvinceDetails(json, i) {
changeProvinceName(json[i-1].province_name, i);
changeProvinceIncome(json[i-1].daily_revenue, i);
changeProvinceTier(json[i-1].max_vehicle_level, i);
changeProvinceTime(json[i-1].prime_time, i);
}
答案 3 :(得分:0)
已修复:
function loopProvince(provinces, jsonData) {
for (i = 0; i < provinces.length; i++) {
createCard(i);
getMaps(jsonData[clan_id][i].arena_id, i+1);
changeProvinceDetails(jsonData[clan_id], i+1);
}
}
和
function changeProvinceDetails(json, i) {
changeProvinceName(json[i-1].province_name, i);
changeProvinceIncome(json[i-1].daily_revenue, i);
changeProvinceTier(json[i-1].max_vehicle_level, i);
changeProvinceTime(json[i-1].prime_time, i);
}
解决了问题。 我将i + 1用于省的详细信息,但未用于getMaps。 我应该使用rubber duck method。 还是谢谢大家。