0
133
Views¿Cómo me aseguro de que un evento de clic se limite solo a una tarjeta en la que hice clic?
Estoy usando dos tarjetas Bootstrap en mi aplicación. Oculto una de las cartas (que es de color azul) detrás de una carta (que es de color blanco) como se ilustra a continuación:
...y usa el siguiente código para revelar la tarjeta azul oculta detrás de la tarjeta blanca:
$(document).ready(function(){ $(".card-horizontal").click(function(){ $(".backPanel").slideDown("slow"); }); });resultando en el efecto deseado ilustrado a continuación:
El problema que tengo aquí es que cuando hago clic en una carta para revelar su carta oculta azul, todas las cartas ocultas azules que pertenecen a cartas blancas se revelan simultáneamente como se ilustra a continuación:
¿Cómo modifico el código anterior para limitar este evento solo a las tarjetas en las que se hizo clic?
Encuentre a continuación mi código para la tarjeta:
<div class="card w-75 card-horizontal" id="nftCard"> <div class="img-square-wrapper"> <img class="nftImages" src="http://via.placeholder.com/150" alt="Card image cap"> <div class="card-body cardPadding"> <h5 class="card-title">Card title</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="card w-75 card-horizontal backPanel"> <div class="img-square-wrapper"> <div class="card-body "> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div>3 answers
Answer question0
Usa $(".card-horizontal") para obtener elementos por nombre de clase. Podría dar a las tarjetas y los backPanels su propia id y usar algo como esto para cada par:
$("#white-card1").on("click", function(){ $("#blue-panel1").slideDown("slow"); });Otra forma es usar cosas como padre, hijo, etc. para navegar por el DOM.
En ese caso, si desea utilizar un nombre de clase, defina una nueva clase "tarjeta blanca" para el evento de clic. De lo contrario, hacer clic en una tarjeta azul (en su código llamado "panel posterior") también hace algo.
Si todas esas "tarjetas blancas" tienen el "panel posterior" correspondiente después de ellas en el mismo nivel, se puede usar la propiedad nextElementSibling .
En lugar de usar jQuery, prefiero JavaScript puro (excepto por el método slideDown que necesita):
document.querySelectorAll(".white-card").forEach(el => { el.addEventListener("click", function(){ el.nextElementSibling.slideDown("slow"); }); });Probé el siguiente código en JsFiddle :
HTML
<div class="my-clickable-class" style="background-color: blue;">x</div> <div style="background-color: red;">x</div> <div class="my-clickable-class" style="background-color: yellow;">x</div> <div style="background-color: orange;">x</div>JavaScript
document.querySelectorAll(".my-clickable-class").forEach(el => { el.addEventListener("click", function() { el.style.color = 'white'; el.nextElementSibling.style.backgroundColor = 'green'; }); });- Al hacer clic en el
divazul, se cambia el color deldivrojo. - Al hacer clic en el
divamarillo, se cambia el color deldivnaranja.
0
Puede usar cada uno cada vez que haga clic en un elemento, buscará el elemento relacionado con la clase .backPanel y lo deslizará hacia abajo.
En Case backPanel es un elemento Children of Card
$(document).ready(function(){ $(".card-horizontal").each(function(){ $(this).on("click", function(){ $(this).children(".backPanel").slideDown("slow"); }); }); });En caso de que backPanel sea un elemento hermano de la tarjeta
$(document).ready(function(){ $(".card-horizontal").each(function(){ $(this).on("click", function(){ $(this).siblings(".backPanel").slideDown("slow"); }); }); });En caso de que backPanel sea una clase adicional en el elemento Tarjeta
$(document).ready(function(){ $(".card-horizontal").each(function(){ $(this).on("click", function(){ $(".backPanel", this).slideDown("slow"); }); }); });0
Si backPanel es un elemento secundario de card-horizontal , puede utilizar this palabra clave para seleccionar solo el backPanel dentro card-horizontal .
Aquí está la documentación para esta palabra clave.
$(document).ready(function(){ $(".card-horizontal").click(function(){ $(".backPanel", this).slideDown("slow"); }); });Editar:
Dado card-horizontal y backPanel podrían ser hermanos según su código. Puedes envolverlos en un div y hacer esto:
$(document).ready(function(){ $(".card-horizontal").click(function(){ $(this).siblings(".backPanel").slideDown("slow"); }); });¡Espero que ayude!