Мне нужно окрасить блоки как на фотографии. Только нужно учитывать то что действия нужно выполнять в обе стороны. При клике окрашиваем, ещё раз кликаем окраску снимаем. Помогите разобраться, пожалуйста!
$(document).ready(function() {
/* Клик на услуги - удобства */
document.getElementById('order').onclick = function(event) {
var target = event.target;
if (target.className == '.drive__order_items') {
var color = getComputedStyle(target).backgroundColor;
if (color == "rgb(0, 0, 0)") {
target.style.backgroundColor = ""
} else {
event.target.style.backgroundColor = "black"
}
}
}
});
.drive__suite_first {
float: left;
margin-left: 157px;
}
.drive__par {
font-size: 1.125em;
font-weight: 400;
margin-top: 26px;
margin-bottom: 22px;
}
.drive__order {
list-style: none;
}
.drive__order_block {
border-radius: 3px;
border: 1px solid black;
padding: 13px 13px;
font-size: 1.125em;
}
.drive__order_items {
position: relative;
font-size: 0.875em;
font-weight: 200;
text-align: center;
display: inline-block;
margin-left: 29px;
}
.drive__order_items:first-of-type {
margin-left: 0px;
}
.drive__order_par {
position: absolute;
top: 55px;
left: 50%;
transform: translate(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="drive__order" id="order">
<li class="drive__order_items">
<div class="drive__order_block"><i class="fas fa-parking"></i></div>
<p class="drive__order_par">
Парковка
</p>
</li>
<li class="drive__order_items">
<div class="drive__order_block"><i class="fas fa-concierge-bell"></i></div>
<p class="drive__order_par">
Питание
</p>
</li>
<li class="drive__order_items">
<div class="drive__order_block"><i class="fas fa-hot-tub"></i></div>
<p class="drive__order_par">
Сауна
</p>
</li>
<li class="drive__order_items">
<div class="drive__order_block"><i class="fas fa-drumstick-bite"></i></div>
<p class="drive__order_par">
Мангал
</p>
</li>
</ul>