Я показываю результат цикла, анализирующего файл json.Я могу изменить цвет фона каждого элемента с помощью: nth-child (x).Тем не менее, я не могу изменить цвет заголовков внутри каждого элемента с помощью этого метода.В этом случае я хотел бы сопоставить цвет h4 "ROADMAP" с цветом карты.
CSS
.displayResult{
border: 2px solid black;
border-radius: 10px;
background-color: orange;
}
.card-title{
display: flex;
padding: 1em 1em 0em 1em;
align-items: center;
justify-content: space-around;
margin-bottom: 0px;
}
.details-hidden{
display: flex;
padding: 1em;
align-items: center;
justify-content: space-around;
flex-direction: column;
margin-top: 0px;
}
.details-hidden h4{
border: 2px solid black;
border-width: 2px 0px;
width: 100%;
text-align: center;
padding: 1em;
background-color: black;
color: orange;
margin-top: 0px
}
.details-hidden h5{
border: 2px solid black;
border-width: 2px 0px;
width: 20%;
text-align: center;
padding: 0.8em;
margin: 0px;
}
ul{
list-style: none;
padding: 0;
}
li{
padding: 0.1em;
}
.displayResult:nth-child(2){
background-color: #5cd65c;
}
.details-visible{
display: flex;
padding: 1em;
align-items: center;
justify-content: space-around;
flex-direction: column;
}
HTML
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="displayResult">
<div class="card-title">
<h4>BY TRAIN</h4>
<p><i class="fa fa-clock-o" style="font-size:15px"></i> <b>02H26</b></p>
<p><b>$ 210</b></p>
<p>i</p>
</div>
<div class="details-hidden">
<h4>ROADMAP</h4>
<h5>TRAIN (02H26)</h5>
<ul>
<li>Paris Nord Eurostar</li>
<li>Paris Nord Eurostar</li>
<li>Paris Nord Eurostar</li>
<li><b>MOSCOW<b></li>
</ul>
</div>
<button>*</button>
</div>
<div class="displayResult">
<div class="card-title">
<h4>BY BOAT</h4>
<p><i class="fa fa-clock-o" style="font-size:15px"></i> <b>10H26</b></p>
<p><b>$ 210</b></p>
<p>i</p>
</div>
<div class="details-hidden">
<h4>ROADMAP</h4>
<h5>BOAT (02H26)</h5>
<ul>
<li>boat</li>
<li><b>MOSCOW<b></li>
</ul>
</div>
<button>*</button>
</div>
JS
var btn = document.querySelector("button")
var details = document.querySelector(".details-hidden")
btn.onclick = function(){
details.classList.add("details-visible");
details.classList.remove("details-hidden");
}
Codepen Link
Первая «дорожная карта» должна быть зеленой, вторая оранжевой,и т.д.
Поскольку я никогда не знаю, сколько результатов я получу, я не могу жестко закодировать новые классы.Я должен изменить цвет благодаря чему-то похожему на метод nth-child.