Estoy aprendiendo a codificar y me he encontrado con un problema probablemente bastante fácil de resolver.

Hago una solicitud desde la base de datos, que devuelve un número de usuarios. Para cada usuario, creo algunos campos de entrada como nombre, correo electrónico, etc.

Ahora lo que quiero hacer es usar la misma variable php (que contiene el número de usuarios), para crear o repetir una función x veces.

Esto es lo que he intentado hasta ahora.

var j = 0;

while (j <= i) { //i is the variable passed from php, containing the number of useres

    j++;

    $('#btnEdit'+j).click(function() {

        $("#prename"+j).removeAttr('disabled');
        $("#surname"+j).removeAttr('disabled');
        $("#function"+j).removeAttr('disabled');
        $("#prefix"+j).removeAttr('disabled');
        $("#phone_number"+j).removeAttr('disabled');
        $("#email"+j).removeAttr('disabled');


    });


}

El HTML se parece a esto:

Entrada

<label>Prename</label>
<input name="prename" id="prename<?php echo $i; ?>" value="<?php echo $row['db_prename_value']; ?>" maxlength="100" type="text" placeholder="Prename" disabled="disabled" />

Botón

<input type="button" id="btnEdit<?php echo $i; ?>"
name="button<?php echo $i; ?>" value="Edit"></input>

Para dar una breve explicación:

Si la base de datos devuelve 2 usuarios, todos los campos anteriores se crean para 2 usuarios en php. El usuario 1 tendrá prename1, surname1, etc., mientras que el usuario 2 tendrá prename2, surname2 y así sucesivamente.

No sabré cuántos usuarios son devueltos por la base de datos, por lo que no puedo crear manualmente el fragmento anterior una cantidad determinada de veces.

Para aclarar, ya pasé la variable de php a javascript (variable i). La pregunta es cómo repetir la función javascript x veces, ya que el fragmento que publiqué no funciona.

Hasta donde tengo entendido, lo que hace mi código es iterar a través del ciclo while x una cantidad de veces, pero se detiene en esta línea, ya que no se hace clic en el botón.

    $('#btnEdit'+j).click(function() {

Tal vez estoy confundida acerca de cómo hacer lo que estoy tratando de hacer.

Pongamos un ejemplo. Si la variable i es 2, quiero que el ciclo cree 2 funciones, la primera función debe ejecutarse cuando se hace clic en el botón con la identificación btnEdit1, la segunda función debe ejecutarse cuando se hace clic en un botón con la identificación btnEdit2 etc.

Gracias

2
zoefrankie 21 feb. 2018 a las 15:48

2 respuestas

La mejor respuesta

En lugar de crear una función múltiple, le recomendaría que cree una función única.

Use el atributo personalizado data-* para conservar la variable php <?php echo $i; ?> con la edición button que luego se puede recuperar usando .data(key).

Para adjuntar el controlador de eventos Class Selector (".class") para apuntar a los elementos y usando < a href = "http://learn.jquery.com/events/event-delegation/" rel = "nofollow noreferrer"> Delegación de eventos crea un método único.

<input type="button" class="btnEdit" data-id="<?php echo $i; ?>" name="button<?php echo $i; ?>" value="Edit"></input>

Script

$(document).on('click', '.btnEdit', function(){
    var j = $(this).data('id');
    $("#prename"+j).removeAttr('disabled');
    $("#surname"+j).removeAttr('disabled');
    $("#function"+j).removeAttr('disabled');
    $("#prefix"+j).removeAttr('disabled');
    $("#phone_number"+j).removeAttr('disabled');
    $("#email"+j).removeAttr('disabled');
})
2
Satpal 21 feb. 2018 a las 13:11

¿Por qué necesitas esto?

Puede escribir directamente con un evento onClick en la entrada y también con el parámetro de su id (lo que significa su valor i).

Tome esta respuesta como una idea clave

<input type="button" id="btnEdit<?php echo $i; ?>"
name="button<?php echo $i; ?>" onClick="btnEdit(?php echo $i; ?)" value="Edit"></input>

function btnEdit(id)
{
$("#prename"+id).removeAttr('disabled');
        $("#surname"+id).removeAttr('disabled');
        $("#function"+id).removeAttr('disabled');
        $("#prefix"+id).removeAttr('disabled');
        $("#phone_number"+id).removeAttr('disabled');
        $("#email"+id).removeAttr('disabled');
}

Nota: no tengo experiencia en php. pero esta es solo una idea común

0
Ramesh Rajendran 21 feb. 2018 a las 12:55