[Resolved] Crear un boton en una lista de archivos y que se habra la información de cada re

[Author]

Posts

[Rafael Corts]

Hola Nigel he creado una entrada con el nombre de "personal", tambien he creado un archivo de pagina para que se muestre todos los trabajdaores de la empresa, de cada trabajador aparece su información y un boton para mostrar mas información. Actualmente lo que sucede es que me muestra siempre la información del primer trabajador, como podria hacerlo para que pueda mostrar el contenido de cada uno de los trabajadores?
Saludos.
Rafa Corts

[Nigel]

¿Cómo has implementado este botón?

[Rafael Corts]

hola te paso el codigo para que veas como lo estoy haciendo,

<div class="row p-4">
            <div class="col-md-6">
                <input type="checkbox" id="activate-div">
                <label for="activate-div">
                  
                <div id="text" class="my-div" style="background-image: url('[wpv-post-featured-image size="full" output="url"]');">
                  
                  <button id="boldButton">Ver</button>
                    <img class="imgen float-right" src="mas.jpg" alt="">
                </div>
                <div class="posistionabsolute">
                    <div class="centrar">
                        <p class="text-center textover">Vive como si fueras a
                        morir mañana. Aprende como
                        si fueras a vivir siempre</p>
                    </div>
                </div>
              </label>
                <br>
                <br>
              	<br>
              	[wpv-conditional if="( $(wpcf-linkedin) ne '' )"]
              	<em><u>hidden link</u></em>
              	[/wpv-conditional]
              	[wpv-conditional if="( $(wpcf-twitter) ne '' )"]
              	<em><u>hidden link</u></em>
              	[/wpv-conditional]
              	[wpv-conditional if="( $(wpcf-correo-corporativo) ne '' )"]
              	<em><u>hidden link</u></em>
              	[/wpv-conditional]
            </div>
            <div class="col-md-6 text align-self-end pb-3 " style="z-index:1">
                <div class="subtext">
                    <h2>[wpv-post-title]</h2>
                    <p class="">[wpv-post-body view_template="None"]</p>
                </div>
            </div>
        </div>

<script>
    const boldButton = document.getElementById('boldButton');
    const removeBoldButton = document.getElementById('removeBoldButton');
    const text = document.getElementById('text');
    boldButton.addEventListener('click', function () {
      text.classList.toggle('rc_mov');
    });
</script>

El Boton lo que haces es crear una classe "r_mov" para que el div de la imagen se desplace hacia un lado.
Saludos.
Rafa Corts

[Nigel]

Este es en la salida del archivo, y entonces aparece para cada resultado, ¿correcto?

En este caso el problema es que tendrás un div con clase "text" para cada resultado, y el código no distingue entre estos div's. (La línea const text = document.getElementById('text'); siempre encontrará el primero en la página.)

Debes cambiar estos dos líneas para que sean distintos:

<div class="col-md-6 text-[wpv-post-id] align-self-end pb-3 " style="z-index:1">
...
const text = document.getElementById('text-[wpv-post-id]');

[Rafael Corts]

My issue is resolved now. Thank you!

[Rafael Corts]

Hola Nigel creia que funcionava pero sigue con el mismo problema, solo lo hace con el primer boton.

 <div class="col-md-6">
                <input type="checkbox" id="activate-div">
                <label for="activate-div">
                  
                <div id="text-[wpv-post-id]" class="my-div" style="background-image: url('[wpv-post-featured-image size="full" output="url"]');">
                  
                  <button id="boldButton-[wpv-post-id]">Ver</button>
                    <img class="imgen float-right" src="mas.jpg" alt="">
                </div>
                <div class="posistionabsolute">
                    <div class="centrar">
                      <p class="tede" id="tex">texto </p>
                        <p class="text-center textover">Vive como si fueras a
                        morir mañana. Aprende como
                        si fueras a vivir siempre</p>
                    </div>
                </div>
              </label> 
              	[wpv-conditional if="( $(wpcf-linkedin) ne '' )"]
              	<em><u>hidden link</u></em>
              	[/wpv-conditional]
              	[wpv-conditional if="( $(wpcf-twitter) ne '' )"]
              	<em><u>hidden link</u></em>
              	[/wpv-conditional]
              	[wpv-conditional if="( $(wpcf-correo-corporativo) ne '' )"]
              	<em><u>hidden link</u></em>
              	[/wpv-conditional]
            </div>
            <div class="col-md-6 text-[wpv-post-id] align-self-end pb-3 " style="z-index:1">
                <div class="subtext">
                    <h2>[wpv-post-title]</h2>
                    <p class="">[wpv-post-body view_template="None"]</p>
                </div>
            </div>
        </div>

No se si es un problema que con el bucle el script, pero no funciona bien no consigo que haga la acción que aparezca una classe en cada uno de los bucles.
Saludos.
Rafa Corts

[Nigel]

Hola Rafa

¿Tienes un enlace donde puedo ver la salida?

[Rafael Corts]

Hola Nigel, el button crea una acción de de java para que desplace un div y muestre un texto, si quieres ver el resultado aquí:
hidden link
Saludo.
Rafa Corts

[Nigel]

Hay errores en la consola, porque el código se incluye en la página multiples veces, y declaras las variables con "const" que no se puede re-declarar.

Puedes crear unos alcances distintos para cada instancia de código por envolcrarlo en { }, así:

<script>
{
    const boldButton = document.getElementById('boldButton');
    const removeBoldButton = document.getElementById('removeBoldButton');
    const text = document.getElementById('text-[wpv-post-id]');
    boldButton.addEventListener('click', function () {
      text.classList.toggle('rc_mov');
    });
}
</script>

(Hay otros errores también, que no tiene nada que ver con este código.)