Добавить класс по любому клику внутри блока

Стоит задача добавить класс active для <div class="item"> по любому клику в любом месте блока .item. При этом основная сложность состоит в том, чтобы применялся класс только для конкретного .item.

Пробовал решить задачу данным скриптом:

    $('.item').mouseup(function (e) {
    var container = $('.item');
    if (container.has(e.target).length === 0){
        container.removeClass('active');
    }
    });
.item {
  width: 100px;
  height: 100px;
}
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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

Автор решения: Igor

$('.item').click(function (e) {
  $(this).toggleClass('active');
});
.item {
  width: 100px;
  height: 100px;
}
.active {
  color: red;
  font-weight: bold;
}
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

→ Ссылка