0

Se puede obtener una variable con el contenido de un href al presionar el hipervinculo, en mi código genero los href con un for el cual me genera bastantes, me gustaría encontrar alguna forma de conseguir la variable href cuando presionan el hipervinculo para así después hacer un div con id=href que me permita reducir el código.

Os adjunto el código por si tenéis alguna duda:

  <div class="list-group list-group-flush">
        <?php for ($i = 1; $i <= $row['Coach_user']; $i++): ?>
        <div class="list-group-item list-group-item-action bg-light">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              
            Pack de Ejercicios <?= $i ?>
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <?php  $directorio2= '../packs/pack'.$i;
                $rowNum2= scandir($directorio2);
                $num2=count($rowNum2);
              ?>
              <?php for ($x = 1; $x <= $num2-2; $x++): ?>
            <a class="dropdown-item" href="#<?=$i.$x?>">Ejercicio <?= $x ?></a>
               <?php endfor; ?>
          </div>
        </div>
        <?php endfor; ?>  
      </div>
    </div>

<div id=variable obtenida href>contenido</div>

Como podéis ver lo quiero obtener seria:#12, #212, por poner ejemplos. Sin la almohadilla seria mejor ya que al hacer id habría que quitarla.

1 respuesta 1

0

Puedes hacerlo añadiendo un poco de JavaScript. Una forma de hacerlo es crear una versión en HTML de lo que esperas conseguir con PHP y añadirle la funcionalidad.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- For question: https://es.stackoverflow.com/questions/367815 -->
</head>
<body>
    <nav>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#derdf" onclick="clicked(this.href)">Ejercicio 1</a>
            <a class="dropdown-item" href="#sfrdf" onclick="clicked(this.href)">Ejercicio 2</a>
            <a class="dropdown-item" href="#djukk" onclick="clicked(this.href)">Ejercicio 3</a>

            <a class="dropdown-item" href="#53a2s" onclick="clicked2('53a2s')">Ejercicio 4</a>
            <a class="dropdown-item" href="#d88km" onclick="clicked2('d88km')">Ejercicio 5</a>
        </div>
    </nav>
    <main>
        <div id="target">Some content</div>
    </main>

    <script>
        let targetId = 'target';

        function clicked(hrefAttr)
        {
            // Obtener valor de href
            const temp = hrefAttr.split('#');
            const cleanValue = temp.pop();
            console.log('href value: ' + cleanValue); // HACK: trace

            // Reemplazar id del div
            replaceId(cleanValue)
        }

        function clicked2(hrefAttrValue)
        {
            // Reemplazar id del div
            replaceId(hrefAttrValue)
        }

        function replaceId(newIdValue)
        {
            const targetElement = document.getElementById(targetId);
            targetElement.setAttribute('id', newIdValue);

            // modifica valor de targetId para obtener el elemento
            // en próximos clicks
            targetId = newIdValue;
        }
    </script>
</body>
</html>

Explicación

Como tienes que imprimir cada uno de los enlaces, puedes imprimir al tiempo un onclick en los mismos. Te puse dos ejemplos, en uno le pasas a la función receptora clicked() el elemento atributo href del que tendrás que sacar el valor limpio del atributo después, o directamente ese valor que estas añadiendo a href, función clicked2().

Finalmente la función replaceId() cambia el valor de la ID de tu div. He usado una global en este último paso (targetId), ya que si el elemento div puede obtenerse inicialmente con su ID original 'target', al cambiar esta con cada selección, hay que saber cual será cuando volvamos a repetir esta acción.

En tu código:

Puedes generar los enlaces así (para usar la función clicked2() del ejemplo):

<a class="dropdown-item"
    href="#<?=$i.$x?>"
    onclick="clicked2(<?=$i.$x?>)">
    Ejercicio <?= $x ?>
</a>
9
  • Entiendo el código pero luego como hago para mostrar el div?Es decir cuando haga <div id="variable href">Contenido</div> como sabrá que al clicar el ejercicio1 la variable sera 11? No quiero hacerlo con if o case porque tengo una lista enorme de ejercicios. Commented el 23 jun. 2020 a las 10:55
  • No entiendo muy bien lo que quieres decir... ¿quieres mostrar una caja diferente con un contenido determinado en función de que enlace pulsas?
    – Orici
    Commented el 23 jun. 2020 a las 11:10
  • Exacto, según presionan el ejercicio quiero obtener el href de ese ejercicio para así poder ponerlo en un div y mostrar el contenido referente a ese ejercicio. Si es el ejercicio 2 cuando lo cliquen sacar el href que en este caso seria 2 y luego en un div poner como id una variable que contenga el href obtenido en este caso el 2. Commented el 23 jun. 2020 a las 11:14
  • Se me ocurren dos opciones: 1. Imprimir inicialmente todos los divs con sus contenidos, ocultarlos todos con CSS y mostrar el seleccionado (esto solo lo haría con pocos divs / contenidos). 2. Peticiones asíncronas. En el momento en que seleccionas un enlace solicitas al servidor el contenido relacionado y cargarlo en el div.
    – Orici
    Commented el 24 jun. 2020 a las 8:35
  • Mi problema aqui en esta en que no se como saber cual se ha seleccionado porque la dirección href no la tengo, como se han generado en el for yo no tengo forma de que cuando alguien presione en un ejercicio sepa cual es. Eso es lo que busco una forma de obtener la dirección href cuando presionan el ejercicio. Commented el 24 jun. 2020 a las 12:44

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.