Estoy ampliando un sitio (menright.com) que muestra unos cincuenta años de fotos. Este enlace va a la página de la primera foto: ( https://menright.com/pages/photoPages/photos-1967.php ). Cada foto va seguida de un pie de foto, y hay un botón que permite al espectador ver una descripción más larga que reemplaza el pie de foto. El botón no funciona aquí, pero te permite ver de lo que estoy hablando.
Para implementar esto, tengo un img (el botón) dentro de la etiqueta ap (el título). Al hacer clic en el botón, se sustituye la descripción más larga extraída del alt y el título en una segunda img (la imagen) inmediatamente encima del título.
No puedo usar identificaciones ya que hay muchos subtítulos e imágenes en cada página.
Aquí está el esqueleto HTML de las partes significativas del problema:
<img alt='long description' title='location image taken' /> <p class='the caption'> <img class='get long description button' /> </p>Estoy pensando que tengo que encontrar el nodo del objetivo (el botón), rastrear su padre (el título) y luego obtener el alt y el título de algo como un Sibling anterior (la imagen) y usar el HTML interno del padre ( el título) para mostrar la descripción larga.
¿Tengo razón en esta suposición o hay otra forma de hacerlo? Y si esta es la técnica que necesito usar, ¿cómo lo hago? Soy totalmente nuevo en el uso de nodos en mi JavaScript estándar y no quiero agregar JSquery u otras bibliotecas a mis páginas.
Esta es mi primera publicación aquí, aunque he usado el sitio durante años. ¡Gracias por cualquier ayuda que pueda proporcionar!
Estoy pensando que tengo que encontrar el nodo del objetivo (el botón), rastrear su padre (el título) y luego obtener el alt y el título de algo como un Sibling anterior (la imagen) y usar el HTML interno del padre ( el título) para mostrar la descripción larga.
¿Tengo razón en esta suposición o hay otra forma de hacerlo?
Si se apega a esa estructura, sí, eso es lo que haría (probablemente previousElementSibling para que no tenga que preocuparse por los nodos de texto que intervienen), y establecer textContent en lugar de innerHTML a menos que desee < y & en el texto para ser interpretado como HTML. Probablemente lo haría a través de la delegación de eventos en cualquier contenedor que tenga todos estos ( body , si no hay nada más cerca):
theContainer.addEventListener("click", event => { const btn = event.target.closest(".get.long.description.button"); if (btn && theContainer.contains(btn)) { const p = btn.parentElement; const alt = p.previousElementSibling?.alt; if (alt) { p.textContent = alt; // `textContent` assuming you don't have tags } } });Pero si puedes envolver todo eso en un elemento:
<div class="wrapper"> <img alt='long description' title='location image taken' /> <p class='the caption'> <img class='get long description button' /> </p> </div>... puedes hacerlo más robusto:
theContainer.addEventListener("click", event => { const wrapper = event.target.closest(".container"); if (wrapper && theContainer.contains(wrapper)) { const p = wrapper.querySelector(".the.caption"); const alt = wrapper.querySelector(".location.image.taken")?.alt; if (alt) { p.textContent = alt; // `textContent` assuming you don't have tags } } });Eso no se basa en la relación exacta entre los elementos, solo que están todos en el mismo contenedor, por lo que puede moverlos a medida que evoluciona el diseño de la página sin cambiar su código.