En mi código, el usuario hace clic en los datos. Los datos se convierten en un cuadro de entrada. Después de ingresar los datos, el usuario presiona Enter y los datos se actualizan. Aquí está mi código para esto:

//User clicks data. An input data is shown. 
    $(document).on("click", "#hour1Name", function( event ){
        $("#hour1Name").addClass("hidden");
        $("#hour1Input").removeClass("hidden");
    });

    //User inputs data. On enter, data is updated. 
    $("#hour1Data input").keypress(function (e) {
    if (e.keyCode == 13) {
        var hour1Data = document.getElementById("hour1Input").value;
        document.getElementById("hour1Name").innerHTML = hour1Data;

        $.post("UpdateTime.php",
        {
            loginName: "benjamin_lawson",
            hourData: hour1Data
        },

        function(data, status){
        alert("Data: " + data + "\nStatus: " + status);

        })

        $("#hour1Input").addClass("hidden");
        $("#hour1Name").removeClass("hidden");
    }
    });

Esto enlaza a:

<div class="col-xs-5 center <?php checkColor(1); ?>">
                <span id="hour1Data">
                    <p id="hour1Name"> <?php echo $hour1; ?> </p>
                    <input id="hour1Input" class="short hidden" type="text">
                </span>
            </div>

¡Esto funciona muy bien! Pero tengo 24 datos "hour1Data, hour2Data, etc ..." ¿hay alguna forma de modificar mi código jquery anterior para que pueda reaccionar y responder a cada uno de mis datos o debo duplicar el código anterior 24 veces? ¡Gracias!

1
Ben L 11 may. 2016 a las 07:10

3 respuestas

La mejor respuesta

He mantenido las clases comunes hName y hInput para las etiquetas <p> y <input>. No es necesario usar .each() también como mencioné anteriormente en los comentarios.

HTML

<div class="col-xs-5 center <?php checkColor(1); ?>">
  <span id="hour1Data">
                    <p id="hour1Name" class="hName"> </p>
                    <input id="hour1Input" class="short hidden hInput" type="text">
                </span>
</div>
<div class="col-xs-5 center <?php checkColor(2); ?>">
  <span id="hour2Data">
                    <p id="hour2Name" class="hName"> </p>
                    <input id="hour2Input" class="short hidden hInput" type="text">
                </span>
</div>
<div class="col-xs-5 center <?php checkColor(3); ?>">
  <span id="hour3Data">
                    <p id="hour3Name" class="hName"> </p>
                    <input id="hour3Input" class="short hidden hInput" type="text">
                </span>
</div>

Y luego usó .siblings() para buscarlos para cada uno de los eventos.

JS

$(document).on("click", ".hName", function(event) {
  $(this).addClass("hidden");
  $(this).siblings(".hInput").removeClass("hidden");
});

//User inputs data. On enter, data is updated. 
$(document).on('keypress', '.hInput', function(e) {
  if (e.keyCode == 13) {
    var hourData = $(this).val();
    $(this).siblings(".hName").html(hourData);
    $.post("UpdateTime.php", {
        loginName: "benjamin_lawson",
        hourData: hourData
      },

      function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);

      })


    $(this).addClass("hidden");
    $(this).siblings(".hName").removeClass("hidden");
  }
});

Consulte este fiddle.

0
Developer107 11 may. 2016 a las 04:51

No tiene que duplicar el código. Puede hacer esto usando el mismo nombre de clase para cada intervalo de datos "hour1Data, hour2Data, etc ...". y tu código sería así.

 <div class="col-xs-5 center <?php checkColor(1); ?>">
        <span id="hour1Data" class="hour-data">
          <p id="hour1Name"> <?php echo $hour1; ?> </p>
           <input id="hour1Input" class="short hidden" type="text">
                    </span>
                </div>
               <div class="col-xs-5 center <?php checkColor(1); ?>">
                    <span id="hour2Data" class="hour-data">
                        <p id="hour2Name"> <?php echo $hour1; ?> </p>
                        <input id="hour2Input" class="short hidden" type="text">
                    </span>
                </div>

// El usuario hace clic en los datos. Se muestra un dato de entrada.

   $(document).ready(function(){
    $(".hour-data p").click(function( event ){
    $(this).addClass("hidden");            $(this).siblings('input').removeClass("hidden");
    });


    })

    //User inputs data. On enter, data is updated. 
    $(".hour-data input").keypress(function (e) {
if (e.keyCode == 13) {
    var hour1Data = $(this).value;
    $(this).siblings('p').html(hour1Data);

    $.post("UpdateTime.php",
    {
        loginName: "benjamin_lawson",
        hourData: hour1Data
    },

    function(data, status){
    alert("Data: " + data + "\nStatus: " + status);

    })

    $(this).addClass("hidden");
   $(this).siblings('p').removeClass("hidden");
}
});
0
Tej Patil 11 may. 2016 a las 04:57

Puede usar la concatenación de cadenas para generar selectores dinámicos. Si no desea cambiar su HTML, puede usar debajo de JS. De lo contrario, hay mejores opciones en otras respuestas.

Html

<span id="hour1Data">
    <p id="hour1Name"> Lorem Ipsum doller sit amet is simple dummy text </p>
    <input id="hour1Input" class="short hidden" type="text">
</span>

<span id="hour2Data">
    <p id="hour2Name"> Lorem Ipsum doller sit amet is simple dummy text </p>
    <input id="hour2Input" class="short hidden" type="text">
</span>

<span id="hour3Data">
    <p id="hour3Name"> Lorem Ipsum doller sit amet is simple dummy text </p>
    <input id="hour3Input" class="short hidden" type="text">
</span>

Js

    var num_items = 4;

    for (var i = 1; i < num_items; i++) {
        $("#hour"+i+"Data input").keypress(function (e) { proper_name(e); });
        $("#hour"+i+"Name").click(function(e) { show_input(e); });
    }

    function get_int_from_id(id) {
        i = id;
        i = i.substring(4,5);
        return i;
    }

    function show_input(e) {
        i = get_int_from_id(e.target.id);

        $("#hour"+i+"Name").addClass("hidden"); 
        $("#hour"+i+"Input").removeClass("hidden");

        $("#hour"+i+"Input").focus();            
    }

    function proper_name(e) {
        if (e.keyCode == 13) {
            i = get_int_from_id(e.target.id);

            var hour1Data = document.getElementById("hour"+i+"Input").value;
            document.getElementById("hour"+i+"Name").innerHTML = hour1Data;

            $.post("UpdateTime.php",
            {
                loginName: "benjamin_lawson",
                hourData: hour1Data
            },

            function(data, status){
                alert("Data: " + data + "\nStatus: " + status);

            })

            $("#hour"+i+"Input").addClass("hidden");
            $("#hour"+i+"Name").removeClass("hidden");
        }
    }
0
John Fonseka 11 may. 2016 a las 04:59