Как добавить активный класс с JQuery на пользовательский элемент?

Question

Я сделал пользовательский компонент карты с простым HTML и CSS. Вот мой код для HTML:

<div class="item">
    <div class="item-content">
        <div class="item-title">
            Title 1
        </div>
        <div class="item-subtitle">
            <label>test, test, test</label>
            <i class="icon-basket remove-item"></i>
        </div>
    </div>
</div>

Вот мой код CSS для стиля:

.item {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 15px;    
    padding-bottom: 15px;
    box-shadow: 0px 4px 10px rgba(176, 176, 176, 0.2);
}


    .item:hover {
        cursor: pointer;
        background-color: #EEF5FF;
    }

.item-title {
    font-weight: 600;
    padding-left: 24px;
}

.item-subtitle {
    padding-left: 24px;
    font-weight: 100;
}

    .item-subtitle label {
        width: calc(100% - 64px);
        display: inline-block;
        padding-top: 10px;
    }

Компонент карты выглядит хорошо. Теперь я хочу добавить активный класс к элементу. Я сделал наведение, и когда я нажимаю на элемент и хочу, чтобы цвет наведения оставался (активным).

Это мой код JQuery:

$(document).ready(function(){
  $('item').click(function(){
    $('item').removeClass("active");
    $(this).addClass("active");
});
}); 

Наведение работает хорошо, но когда я нажимаю на него, цвет фона не остается активным.

Я сделал jsfiddle, чтобы вы могли увидеть поведение:

https://jsfiddle.net/gvu9nk8d/2/

Может ли кто-нибудь указать мне правильное направление?

Answer 1

Две вещи, которые вам нужно исправить 1. в вашем селекторе событий jquery click отсутствует точка для класса item 2. Вам нужно добавить класс active в CSS

$(document).ready(function(){
  $('.item').click(function(){ //added dot here
    $('.item').removeClass("active");//added dot here
    $(this).addClass("active");
});
});

.item {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 15px;    
    padding-bottom: 15px;
    box-shadow: 0px 4px 10px rgba(176, 176, 176, 0.2);
}


    .item:hover, .item.active { /* added class here*/
        cursor: pointer;
        background-color: #EEF5FF;
    }

.item-title {
    font-weight: 600;
    padding-left: 24px;
}

.item-subtitle {
    padding-left: 24px;
    font-weight: 100;
}

    .item-subtitle label {
        width: calc(100% - 64px);
        display: inline-block;
        padding-top: 10px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="item">
    <div class="item-content">
        <div class="item-title">
			Title 1
        </div>
        <div class="item-subtitle">
            <label>test, test, test</label>
            <i class="icon-basket remove-item"></i>
        </div>
    </div>
</div>

JSFiddle Demo

Answer 2

Проблема с вашим кодом заключалась в том, что вы использовали неправильный селектор. Это должно быть $('.item'), так как item является классом. Затем будет добавлен активный класс

Также добавлен некоторый стиль для внесения изменений, когда элемент активен

Answer 3

Вам не хватает точки на предмете класса

    $(document).ready(function(){
       $('.item').click(function(){
         $('.item').removeClass("active");
         $(this).addClass("active");
       });
     });