0
248
ViewsCómo obtener detalles específicos de Div / Card cuando el usuario hizo clic en eso usando javascript
Estoy creando varias tarjetas usando la API de recuperación, estas tarjetas contienen detalles como (Autor, Título, Imagen de portada, etc.).
Hay muchos renderizados de tarjetas allí una vez que la API llama, mi problema es cómo obtener datos/detalles específicos de la tarjeta como (autor, título, etc.) de la tarjeta en la que se hizo clic. cuando el usuario hace clic en cualquiera de las tarjetas de este conjunto.
HTML
<div class="row" id="ShowReports"> <div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card"> <div class="card p-1"> <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image" class="bookimg" width="150" height="200"> <h6 class="mb-3 booktitle">${title1}</h6> <p class="mb-0 bookpara" name="author">Author : ${author1}</p> <p class="mb-3 bookpara" name="pages">Pages : ${pages1}</p> <a href="${downloadLinks}" class="reportbtn">Download1</a> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card"> <div class="card p-1"> <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image" class="bookimg" width="150" height="200"> <h6 class="mb-3 booktitle">${title2}</h6> <p class="mb-0 bookpara" name="author">Author : ${author2}</p> <p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p> <a href="${downloadLinks}" class="reportbtn">Download2</a> </div> </div> </div>JavaScript
function show() { var details = this.innerHTML console.log(details)}
No sé cuál es el enfoque o método correcto para esto...
2 answers
Answer question0
ACTUALIZADO
Necesitamos asignar una identificación única a los elementos de datos. Por ejemplo: id="${id}-author" . Tenga en cuenta que la identificación es de su tarjeta de identificación
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(${id})" id="card"> <div class="card p-1"> <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image" class="bookimg" width="150" height="200"> <h6 class="mb-3 booktitle" id="${id}-booktitle">${title1}</h6> <p class="mb-0 bookpara" name="author" id="${id}-author">Author : ${author1}</p> <p class="mb-3 bookpara" name="pages" id="${id}-pages">Pages : ${pages1}</p> <a href="${downloadLinks}" class="reportbtn">Download1</a> </div> </div> Después de eso, podemos implementar la función show como se muestra a continuación
function show(id) { const author = document.getElementById(id + "-author").innerHTML; const booktitle = document.getElementById(id + "-booktitle").innerHTML; const pages = document.getElementById(id + "-pages").innerHTML; console.log({ author, booktitle, pages }) }Si no desea modificar HTML, también puede intentarlo de esta manera
onclick="show({ author: ${author}, booktitle: ${booktitle}, pages: ${pages} })"Y necesita tener parámetros correspondientes a su nombre de datos
function show({ author, booktitle, pages }) { console.log({ author, booktitle, pages }) }RESPUESTA ANTIGUA
onclick="show(this)" this en este contexto se refiere al global, pero según entiendo su pregunta, está tratando de obtener un contexto de alcance, por lo que el cambio podría ser
onclick="show(event)" Para acceder al innerHTML desde ese clic, puede probar de esta manera
function show(event) { //the param needs to be passed properly var currentElement = event.target || event.srcElement; var details = currentElement.innerHTML console.log(details) } P/s: si desea mantener el contexto global en this , también debe pasar la función param on show .
0
@ Nick Vu, gracias por su comentario, su enfoque es bastante lógico y excelente, bueno, lo que hice fue asignar una identificación única a cada div de tarjeta al llamar a la API y luego apuntar al HTMLS interno de su childnode.
HTML
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" id="card"> <div class="card p-1" id="second" onclick="show(id)"> <img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image" class="bookimg" width="150" height="200"> <h6 class="mb-3 booktitle">${title2}</h6> <p class="mb-0 bookpara" name="author">Author : ${author2}</p> <p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p> <a href="${downloadLinks}" class="reportbtn">Download2</a> </div> </div> </div>javascript
function show(e) { console.log(e) var details = document.getElementById(e) console.log(details) console.log(details.childNodes[1].src) console.log(details.childNodes[3].innerHTML) console.log(details.childNodes[5].innerHTML) console.log(details.childNodes[7].innerHTML)}
esto está funcionando en torno a lo que quiero como salida ... gracias. O puede ser que por fin pueda hacer forEach loop of childnodes para hacerlo más corto.