Question

我正在尝试建立试管状态站点，其目的是显示每条试管线的状态（良好的服务，较小的延迟等）

起初，我想显示所有内容，并对响应进行颜色编码，因此，除“良好服务”外，所有内容均为红色文本。

相反，我想做的就是隐藏整个div（如果它是一项很好的服务）。意味着您只会看到没有“良好服务”响应的管道。

每条管路我都有相同的代码，但下面仅显示一个示例

这是JavaScript

$.getJSON ('https://api.tfl.gov.uk/Line/central/Status? 
detail=false&app_id=APIID&app_key=APIKEY', 
function(data) { console.log(data);

$.each(data, function (index, value) {
console.log(value);

var statuscentral = value.lineStatuses[0].statusSeverityDescription;
console.log(statuscentral);

$('.statuscentral').text(statuscentral);

if (statuscentral != "Good Service") {
tube.classList.add("noShow");
}
});
});

不确定添加是否有帮助，但这是html

<div class="tube">
<span class="central"></span>
<h2 class="tube-title">Central</h2>
<h3 class="statuscentral"></h3>
</div>

css

/* create 3 equal columns that floats next to each other */
.tube {
float: left;
width: 33%;
padding-bottom: 50px;
display: inline-block;
}

/* styles for tube span */
.central {
background-color: #ED462F;
}

/* hides div */
.noShow {
display: none;
}

Answer 1

一种解决方案是创建一个隐藏div的CSS类。

.noShow{display: none;}

然后您可以使用classList.add函数根据您的逻辑为div提供该类

if(statuscentral != "Good Service"){
tube.classList.add("noShow");
}

隐藏div取决于变量响应

1 个答案: