Así que mi base de datos tiene una tabla con una columna id. Mi index.php Page echó todas las filas de base de datos de id en divs individuales.

El nombre de la clase del elemento de botón está hecho clic en:

"mainbut<?php echo $id->rqvid; ?>"

Y el nombre de la clase del elemento DIV oculto es:

"subdiv<?php echo $id->rqvid; ?>"

Lo que quiero lograr es cuando se hace clic en mainbut<?php echo $id->rqvid; ?>, entonces se muestra subdiv<?php echo $id->rqvid; ?>. En términos más simples, cuando se hace clic en un botón (con fila id), luego se muestra un DIV oculto (con la misma fila id).

Una representación visual de lo que quiero logrado:

Nota: el cuatro 1 's representa la fila de la columna id de la base de datos

----------------
| 1 [mainbut1] | <-- when [mainbut1] is clicked on
----------------
| 1 (subdiv1)  | <-- then div of classname "subdiv1" shows
----------------

Así que, por ejemplo, tengo 3 filas con el 1 a 3 de la ID de mi tabla. Pero cuando haga clic en cualquiera de los botones, no mostrará el elemento DIV oculto de la misma ID . En su lugar, muestra solo un elemento DIV oculto de la última fila id . Así que este es el resultado que estoy recibiendo:

----------------
| 1 [mainbut1] | <-- when [mainbut1] is clicked on...
----------------
                 <-- (div "subdiv1" does not show. Why?)
----------------
| 2 [mainbut2] | 
----------------
----------------
| 3 [mainbut3] |
----------------
| 3 (subdiv3)  | <-- But instead div "subdiv3" shows.
----------------

Quiero poder hacer clic en cualquiera de los botones y solo su ID Ocupado correspondiente con el mismo ID muestra . Definitivamente hay algo que me estoy perdiendo de mi código jQuery, creo. ¿Puede alguien ayudarme a hacer que esto funcione bien? Aquí está el código actual que tengo:

<?php foreach($ids as $id): ?>
<div>
    <?php echo $id->rqvid; ?>
    <button class="mainbut<?php echo $id->rqvid; ?>">click</button>
</div>

<div class="subdiv<?php echo $id->rqvid; ?>">
    <?php echo $id->rqvid; ?> sub-box
</div>

<script>
var i = '<?php echo $id->rqvid; ?>';
$(".mainbut"+i).on('click', function() {
    $(".subdiv"+i).css("display","block");
});
</script>
<?php endforeach; ?>
0
misner3456 14 jul. 2019 a las 04:02

1 respuesta

La mejor respuesta

Simplemente genere algo como el siguiente html:

<?php foreach ($ids as $id) { ?>
<button onclick="$('#subdiv_<?php echo $id->rqvid ?>').toggle();">
    toggle ID <?php echo $id->rqvid ?>
</button>

<div id="subdiv_<?php echo $id->rqvid ?>">
    ID <?php echo $id->rqvid ?>: sub-box
</div>
<?php } ?>

Explicación: jquery's $('#element_id') devuelve un elemento con el ID element_id y la llamada a toggle() en ese elemento alterna la visibilidad del elemento. Simplemente asegúrese de tener identificaciones únicas de la misma manera que está generando nombres de clases.

Puede probar la parte frontend aquí.

P.S.: No se trata de PHP, es solo un problema HTML y JQUERY.

1
David Ferenczy Rogožan 14 jul. 2019 a las 02:41