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个数据＆＃34; hour1Data，hour2Data等...＆＃34;有没有办法我可以修改我的上面的jquery代码，以便它可以响应和响应我的每个数据或者我必须复制上述代码24次？谢谢！

Answer 1

您不必复制代码。您可以为每个数据范围“hour1Data，hour2Data等”使用相同的类名进行此操作。你的代码就像这样。

     <http:listener-config name="HTTP_Listener_Configuration" host="0.0.0.0" port="8081" doc:name="HTTP Listener Configuration"/>
  <box:config name="Box" clientId="05zpeboxxfms6fo7805izrxff9dwbc74" clientSecret="LVD5juoF7ookFVn4uN69Pco3NI4EQeE0" doc:name="Box">
        <box:oauth-callback-config domain="localhost" localPort="8082" remotePort="8082" path="callback" />
    </box:config>
    <objectstore:config name="ObjectStore" objectStore-ref="_defaultInMemoryObjectStore" doc:name="ObjectStore: Configuration" />
    <flow name="boxAuthenticationFlow">
        <http:listener config-ref="HTTP_Listener_Configuration" path="/auth" doc:name="HTTP"/>
        <box:authorize config-ref="Box" doc:name="Box-Authorize"  />
        <set-payload value="#[flowVars._oauthVerifier]" doc:name="Set Payload"/>
        <logger message="#[payload]" level="INFO" doc:name="Logger"/>
        <box:create-folder config-ref="Box" folderName="test folder" doc:name="Box"/>
    </flow>

//用户点击数据。显示输入数据。

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

Answer 2

我为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。

Answer 3

您可以使用字符串连接来生成动态选择器。如果您不想更改HTML，可以使用以下JS。否则在其他答案中有更好的选择。

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

如何将我的静态变量选择器转换为动态变量选择器？

3 个答案: