私の静的変数セレクタを動的変数セレクタに変えるには？

Question

私のコードでは、ユーザーがデータをクリックします。データは入力ボックスに変わります。データを入力した後、ユーザーのEnterキーを押すとデータが更新されます。ここに私のコードは、このためです：

//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、etc."を持っています。上記のjqueryコードを変更して、それぞれのデータに反応して応答できるようにする方法がありますか？または上記のコードを24回複製する必要がありますか？ありがとうございました！

Answer 1

私は<p>と<input>タグの共通クラスhNameとhInputを続けています。以前にコメントで述べたように、.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 2

コードを複製する必要はありません。これは、データ "hour1Data、hour2Data、etc ..."の各スパンに対して同じクラス名を使用してこれを行うことができます。あなたのコードはこのようになります。

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

//ユーザーがデータをクリックします。入力データが表示されます。

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

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