Как окрасить блок по нажатию в обе стороны?

Question

Мне нужно окрасить блоки как на фотографии. Только нужно учитывать то что действия нужно выполнять в обе стороны. При клике окрашиваем, ещё раз кликаем окраску снимаем. Помогите разобраться, пожалуйста!

$(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>

Answer 1

Лучше вешать обработчик сразу на элемент который будет менятся, $('.drive__order_items').on('click', function(){}); И event.target будет указывать на внутренний вложенный элемент, используйте $(this) вместо этого

Answer 2

Решение не моё то есть мне помогли - делается это вот так

let icon = document.querySelectorAll(".icon");

let last;
for (let i = 0; i < icon.length; i++) {
  icon[i].onclick = e => {
    if (last && last != icon[i]) last.classList.remove("active");
    icon[i].classList.toggle("active");
    last = icon[i].classList.contains("active") ? icon[i] : null;
  }
}

:root {
  --color: #fff;
  --hover: gold;
}

body {
  background: blue;
}

.fas {
  display: block;
  font-size: 100px;
  color: var(--color);
  border-radius: 10px;
  transition: 0.34s linear;
}

.icon {
  border: 3px solid var(--color);
  display: inline-block;
  padding: 16px 20px;
  border-radius: 10px;
  transition: 0.34s linear;
}

.icon.active .fas {
  color: var(--hover);
}

.icon.active {
  border: 3px solid var(--hover);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">


<div class="doc">
  <div class="icon">
    <i class="fas fa-parking"></i>
  </div>


  <div class="icon">
    <i class="fas fa-concierge-bell"></i>
  </div>


  <div class="icon">
    <i class="fas fa-hot-tub"></i>
  </div>


  <div class="icon">
    <i class="fas fa-drumstick-bite"></i>
  </div>
</div>

БЛОГ НА HUSL

Как окрасить блок по нажатию в обе стороны?

Ответы (2 шт):