dimanche 2 juin 2019

Hide div depending on variable response

I'm trying to build a tube status site, the idea is to display the status of each tube line (good service, minor delays etc)

At first I wanted to display all, and to colour code the responses, so everything but "good service" would be red text.

Instead what I'd like to do is hide the entire div if it is a good service. Meaning you'd only see the tube lines that don't have a response of "Good Service"

I have the same code for each tube line, but just showing 1 example below

Here is the javascript

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

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

if (statuscentral != "Good Service") {
$('.statuscentral').show('color', 'red)
}
});

Not sure if it helpful to include, but here is the html

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

And is the 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;
}

Aucun commentaire:

Enregistrer un commentaire