Soy nuevo en el scripting de Jquery/Javascript y, de hecho, tengo algunos problemas. ¿Cómo puedo mostrar un elemento de la misma clase sin afectar a los demás elementos?
Mi código:
$(function() { $('.embedContainer > .myPosterImage').on('click', function() { $('.embedContainer > .myPosterImage').hide(); $('.embedContainer > embed').show(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="embedContainer"> <img class="myPosterImage" src="img/websites/01_documentation.jpg" data-original="img/websites/full/01_full.jpg" /> <embed src="img/websites/Concept.pdf" width="563.41" height="375.98"></embed> </div> <div class="embedContainer"> <img class="myPosterImage" src="img/websites/01_documentation.jpg" data-original="img/websites/full/01_full.jpg" /> <embed src="img/websites/Concept.pdf" width="563.41" height="375.98"></embed> </div>Muchas gracias.
La primera línea los ocultará a todos, lo que puede ser lo que desee hacer (si desea colapsar todos y expandir el que hizo clic, por ejemplo):
$('.embedContainer > .myPosterImage').hide();Pero como ha descubierto, esta segunda línea también los mostrará a todos:
$('.embedContainer > embed').show(); Lo que puede hacer es atravesar el DOM a partir del elemento en el que se hizo clic ( this dentro del controlador de eventos de clic). En este caso, atravesaría el DOM (usando el closest() por ejemplo) a un elemento principal común y luego retrocedería (usando find() por ejemplo) al elemento de destino.
Algo como esto:
$(this).closest('.embedContainer').find('embed').show();