¿Cómo agregar una clase activa con JQuery en un elemento personalizado?

Question

He creado un componente de tarjeta personalizado con html y css simples. Este es mi código para 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>

Y este es mi código CSS para el estilo:

.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;
    }

El componente de la tarjeta se ve bien. Ahora quiero agregar una clase activa al elemento. He hecho un desplazamiento y cuando hago clic en el elemento y quiero que el color de desplazamiento permanezca (activo).

Este es mi código JQuery:

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

El desplazamiento está funcionando bien, pero cuando hago clic en él, el color de fondo no permanece activo.

He hecho un jsfiddle para que pueda ver el comportamiento:

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

¿Puede alguien señalarme en la dirección correcta?

javascript jquery html css twitter-bootstrap

-2

Fearcoder 7 oct. 2019 a las 13:06

Answer 1

Dos cosas que debes corregir 1. a su selector de eventos de jquery click le falta un punto para la clase item 2. Necesita agregar la clase active en el 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

0

Bhushan Kawadkar 7 oct. 2019 a las 10:11

Answer 2

Te falta el punto en el elemento de clase

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

0

Fabio Assuncao 7 oct. 2019 a las 10:09

Answer 3

El problema con su código fue que ha utilizado el selector incorrecto. Debería ser $('.item') ya que el elemento es una clase. Luego se agregará la clase activa

También incluya algún estilo para hacer cambios cuando el elemento está activo

0

Dhananjai Pai 7 oct. 2019 a las 10:11

¿Cómo agregar una clase activa con JQuery en un elemento personalizado?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript