Hola a todos, me está costando entender cómo hacer que esto funcione.
Tengo 8 divs diferentes, cada uno con un img usado como botón y la misma clase (tm-img) y divs ocultos con información adicional. Lo que quiero es haber mostrado solo la imagen al principio y cuando el usuario haga clic en una de las 8 imágenes, dependiendo de la que hizo clic, se muestran los divs ocultos de esa imagen. (Lo que sucede ahora es que si hago clic en una imagen, todos los divs ocultos de todas las imágenes muestran no solo en la que hice clic)
<div class="tm-full-container"> <div class="team-member card-container blue-card"> <img class='tm-img' onclick='run()' src="/team_1.png" alt=""> <h5 class="tm-title">Chef</h6> <div class="tm-info"> <p class="tm-name">Rick Jones</p> <p class="tm-position">Chef</p> </div> </div> <div class="tm-full-info"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p> </div> </div> <script> function run(){ $('.tm-info').toggle(); $('.tm-full-info').toggle(); $('.tm-title').toggle(); }</script>Los otros 7 divs tienen el mismo aspecto con diferente imagen y nombre (Rick).
Gracias por adelantado.
Puede hacer algo como en el siguiente fragmento. Use la palabra clave this para que el elemento en el que se hizo clic no se active.
También puede hacer
forbucle se ejecute a través de todas las etiquetas y activar (alternar) el evento en el que se hizo clic
function funcRun(show) { var showInfo = show.querySelector(".tm-tag-Info"); showInfo.classList.toggle("tm-tag-Info-Show") } .tm-tag-Info { display: none } .tm-tag-Info-Show { display: block } .tm-tag { border: 2px solid red; margin: 10px; padding: 10px; } .imageFun { width: 100px; height: 100px } <div class="tm-tag" onclick="funcRun(this)"> <h4 class="tm-tag-Hed">CV for BV</h4> <span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span> </div> <div class="tm-tag" onclick="funcRun(this)"> <h4 class="tm-tag-Hed">CV for BV</h4> <span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span> </div> <div class="tm-tag" onclick="funcRun(this)"> <h4 class="tm-tag-Hed">CV for BV</h4> <span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span> </div>Esto podría hacerse usando la palabra clave this: https://www.yogihosting.com/jquery-this/
.tm-info, .tm-full-info, .tm-title { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tm-full-container"> <div class="team-member card-container blue-card"> <img class='tm-img' src="https://via.placeholder.com/150" alt=""> <h5 class="tm-title">Chef</h6> <div class="tm-info"> <p class="tm-name">Rick Jones</p> <p class="tm-position">Chef</p> </div> </div> <div class="tm-full-info"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p> </div> </div> <div class="tm-full-container"> <div class="team-member card-container blue-card"> <img class='tm-img' src="https://via.placeholder.com/150" alt=""> <h5 class="tm-title">Chef</h6> <div class="tm-info"> <p class="tm-name">Rick Jones</p> <p class="tm-position">Chef</p> </div> </div> <div class="tm-full-info"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p> </div> </div> <script> $('.tm-img').click(function(){ $(this).parent().parent().find('.tm-info').toggle(); $(this).parent().parent().closest('.tm-full-info').toggle(); $(this).parent().parent().closest('.tm-title').toggle(); }); </script>Considera lo siguiente.
$(function() { function revealFullInfo(event) { var self = $(event.target); var parent = self.closest(".tm-full-container"); $('.tm-info, .tm-full-info, .tm-title', parent).toggle(); } $(".tm-img").click(revealFullInfo); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tm-full-container"> <div class="team-member card-container blue-card"> <img class='tm-img' src="https://dummyimage.com/100x150/000/fff.png" alt=""> <h5 class="tm-title">Chef</h6> <div class="tm-info"> <p class="tm-name">Rick Jones</p> <p class="tm-position">Chef</p> </div> </div> <div class="tm-full-info"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p> </div> </div>Todo es cuestión de usar el selector y el visor correctos.
$('.tm-info, .tm-full-info, .tm-title', parent).toggle();Esto es lo mismo que:
parent.find('.tm-info, .tm-full-info, .tm-title').toggle();