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?
3 respuestas
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>
Te falta el punto en el elemento de clase
$(document).ready(function(){
$('.item').click(function(){
$('.item').removeClass("active");
$(this).addClass("active");
});
});
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
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.