0
312
Views¿Cómo uso la clase de alternancia jQuery para agregar una clase o eliminar un elemento?
No estoy seguro de por qué mi código no responde, todo me parece correcto. Soy nuevo en el uso de jQuery y trato de usar toggleClass para que se muestre la información de la tarjeta cuando se hace clic en la tarjeta en mi página. Inicialmente, me gustaría que esté oculto pero que se pueda activar y desactivar.
$(document).ready(function() { $('.card').click(function() { $(this).toggleClass('inner-card.active'); }); }); .card { display: flex; flex-direction: column; justify-content: end; width: 350px; height: 180px; background: lightgreen; border: 2px solid black; margin-left: 8px; margin-bottom: 8px; cursor: pointer; } .inner-card .active { display: none; } .inner-card { display: flex; flex-direction: column; justify-content: end; background: rgba(255, 165, 0, 0.5) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="inner-card"> <h5>Title</h5> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p> <a href="">Link goes here</a> <div class="img-div"> <img src="../static/img/search.png" class="card-img" alt=""> </div> </div> </div>Debería ir de esto
A esto
2 answers
Answer question0
Creo que hay varios problemas. En primer lugar, creo que desea escribir la lógica display:none CSS de esta manera:
.inner-card.active{ display: none; } Esto significa que la tarjeta interna estará oculta si también tiene la clase active .
En segundo lugar, creo que debe reescribir el script de esta manera:
$(document).ready( function(){ $('.card').click( function() { $(this).find(".inner-card").toggleClass('active'); }); }); Cuando usa toggleClass , necesita usar solo el nombre de la clase, no el selector (-> sin punto). Además, desde el CSS, parece que primero debe encontrar el elemento de la tarjeta interna.
0
Probablemente quieras algo como esto:
$(document).ready(function() { $('.card').click(function() { $(this).find(".inner-card").toggleClass('hidden'); }); }); .card { display: flex; flex-direction: column; justify-content: end; width: 350px; height: 180px; background: lightgreen; border: 2px solid black; margin-left: 8px; margin-bottom: 8px; cursor: pointer; } .hidden { display: none !important; } .inner-card { display: flex; flex-direction: column; justify-content: end; background: rgba(255, 165, 0, 0.5) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="inner-card hidden"> <h5>Title</h5> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p> <a href="">Link goes here</a> <div class="img-div"> <img src="../static/img/search.png" class="card-img" alt="magnify lens"> </div> </div> </div>