1

Tengo un modal con distintos tabs y necesito cargar el id que he clickeado para consultar unos registros en directorio.

Con este código voy mostrando contenido en distintos tabs. Pero ¿Cómo cargar esos id en la función?

Los id vienen de distintos div en mi HTML.

Por ejemplo tengo div así:

<div id="l73" >Textos </div>
<div id="l74" >Textos </div>
<div id="l75" >Textos </div>
<div id="l76" >Textos </div>
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <script type="text/javascript">
        $(document).ready(function(e) {
            $("#l73").click(function() {
                $("#home").html('<embed src="./files/l73_4b/l73_ejemplo.pdf" type="application/pdf" width="100%" height="400px" class="margenfilemodal" /> ');
            });
        });
    </script>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <script type="text/javascript">
      $(document).ready(function(e) {
          $("#l73").click(function() {
              $("#profile").html('<embed src="./files/l73_4b/l73_instruccion.pdf" type="application/pdf" width="100%" height="400px" class="margenfilemodal" style="margin-top: -420px;"  /> ');
          });
      });
  </script>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  <script type="text/javascript">
      $(document).ready(function(e) {
          $("#l73").click(function() {
              $("#contact").html('<embed src="./files/l73_4b/l73_instruccion.pdf" type="application/pdf" width="100%" height="400px" class="margenfilemodal" style="margin-top: -420px;"  /> ');
          });
      });
  </script>
</div>

Lo que busco es que al darle click al div con id 73 por ejemplo, ese id se cargue en la función $("**#l73**").click y ver como cargarlo aquí <embed src="./files/**l73_4b**/l73_instruccion.pdf" para que me consulte en esta ruta.

1
  • En todas tus funciones estás asignando el evento al mismo elemento #173 y, en cada clic, va a ejecutarlas todas. Deberías crear los elementos de acuerdo a la documentación para asegurar que se vea como esperas y, después, aplicar los eventos.
    – Triby
    el 18 feb. 2021 a las 15:24

3 respuestas 3

5

Se puede solucionar de una forma sencilla, usando los eventos, vas a tener que colocar una misma clase a todos los <div>, pues así nos evitamos añadir un eventListener por cada uno

document.querySelectorAll(".click").forEach(el => {
  el.addEventListener("click", e => {
    const id = e.target.getAttribute("id");
    console.log("Se ha clickeado el id "+id);
  });
});
<div id="l73" class="click">Textos </div>
<div id="l74" class="click">Textos </div>
<div id="l75" class="click">Textos </div>
<div id="l76" class="click">Textos </div>

Usamos .target para saber a cual elemento se ha clickeado

Teniendo ya el elemento, solo usamos getAttribute para poder obtener el id

Entonces, solo que da ponerle un ID al <embed>

Usamos querySelectorAll para obtener todos los elementos del DOM con un selector de CSS Específico, los cuales podremos recorrer con forEach

document.querySelectorAll(".click").forEach(el => {
  el.addEventListener("click", e => {
    const id = e.target.getAttribute("id");
    const process = "./files/"+id+"/"+id+"_instruccion.pdf";
    emb.setAttribute("src", process);
    console.log("ID Procesado: "+emb.getAttribute("src"));
  });
});
<div id="l73" class="click">Textos </div>
<div id="l74" class="click">Textos </div>
<div id="l75" class="click">Textos </div>
<div id="l76" class="click">Textos </div>
<embed id="emb">

2

Ya que usas jQuery, te dejo un ejemplo de como hacerlo usando esta librería

$( document ).ready(function() {
    $('.clickable').click(function() {
        $('#home').html('<embed src="./files/'+this.id+'_4b/'+this.id+'_ejemplo.pdf" type="application/pdf" width="100%" height="400px" class="margenfilemodal" />')
    });
});
<div id="l73" class="clickable">Textos </div>
<div id="l74" class="clickable">Textos </div>
<div id="l75" class="clickable">Textos </div>
<div id="l76" class="clickable">Textos </div>

<div id="home"></div>

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • Simple y efectiva, ¡muy buena respuesta!
    – Triby
    el 18 feb. 2021 a las 17:00
-1
document.querySelectorAll(".click").forEach(el => {

  el.addEventListener("click", e => {

    const id = e.target.getAttribute("id");

    console.log("Se ha clickeado el id "+id);

  });

});
2
  • amigo en ese codigo que son el "el" que colocas en forEach y el "e". No entendi soy nuevo en esto, el codigo funciona bien pero me gustaria saber como.
    – pc i9
    el 8 abr. 2022 a las 15:22
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 8 abr. 2022 a las 15:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.