javascript - 如何将静态变量选择器变成动态变量选择器？

Question

在我的代码中，用户单击数据。数据变成输入框。输入数据后，用户按回车键，数据就会更新。这是我的代码:

//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");
    }
    });

此链接到:

<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>

这很好用!但是我有 24 条数据“hour1Data、hour2Data 等...”有没有办法可以修改我上面的 jquery 代码，以便它可以对我的每个数据使用react和响应，或者我必须重复上面的代码 24 次？谢谢你!

Answer 1

我保留了公共(public)类(class)hName和hInput对于 <p>和<input>标签。无需使用.each()正如我之前在评论中提到的那样。

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>

然后使用.siblings()为每个事件获取它们。

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");
  }
});

请引用此fiddle .