jQuery我們可以循環一個函數嗎？

Question

為什么這種類型的循環無法工作？ 如果此函數未循環，則效果很好。 我需要此代碼，因為我有動態附加的div

$(document).ready(function(){
    for (var count = 1; count < 10; count++) {
            $('#keranjang').on('keyup', '#tinggikm'+count+', #lebarkm'+count, function(){
            <!-- Ambil nilai !-->
            var tinggi=parseInt($('#tinggikm'+count).val());
            var lebar=parseInt($('#lebarkm'+count).val());
            var harga=(tinggi * lebar) * 1000;

            $('#hargakm'+count).val(format1(harga, "Rp."));
            });
    }
});

這是我從附加的jQuery HTML

countkm = 1;
 countj = 1;
 countp = 1;
$("#somebutton").click(function () {
 var tipe = $( "#selecttipe option:selected" ).val();
  $("#keranjang").append(
                '<div class="col-md-4" style="border:1px solid #0d8b2a; border-radius:10px; width:31%; margin:10px">'+
                    '<p style="font-size:16px; letter-spacing:1px; font-weight:700; text-transform:uppercase; text-decoration:underline; margin-bottom:15px">'+
                    (tipe == "km" ? 'Kaca Mati ' : tipe == "j" ? 'Jendela ' : 'Pintu ')+(tipe == "km" ? countkm : tipe == "j" ? countj : countp)+
                    '</p>'+
                    '<div class="form-group">'+
                        '<label class="control-label">TINGGI (cm)</label>'+
                        '<input type="text" class="form-control" value="'+
                        (tipe == "Pintu" ? '200' : '100')+
                        '" id="tinggi'+tipe+(tipe == "km" ? countkm : tipe == "j" ? countj : countp)+'">'+
                        '<label class="control-label">LEBAR (cm)</label>'+
                        '<input type="text" class="form-control" value="'+
                        '100'+
                        '" id="lebar'+tipe+(tipe == "km" ? countkm : tipe == "j" ? countj : countp)+'">'+
                        '<label class="control-label">HARGA</label>'+
                        '<input type="text" class="form-control" disabled value="'+
                        '0'+
                        '" id="harga'+tipe+(tipe == "km" ? countkm : tipe == "j" ? countj : countp)+'">'+
                    '</div>'+
                '</div>'
                );
                if (tipe == "km"){countkm++;}else if(tipe =="j"){countj++;}else{countp++;};

});

這是我的按鈕html以創建div

<select style="float:left; width:50%" class="form-control select2me" id="selecttipe" required>
                            <option value="km">Kaca Mati</option>
                            <option value="j">Jendela</option>
                            <option value="p">Pintu</option>
                        </select>
                        <button id="somebutton" style="float:left; margin-left:10px" type="submit" class="btn"> Tambah</button>

Answer 1

關於使用id的事情以選擇器開始而不是像這樣循環：

$(document).ready(function() {
  $('#keranjang').on('keyup', '[id^=tinggikm], [id^=lebarkm]', function() {
    <!-- Ambil nilai !-->
    var tinggi = parseInt($('#tinggikm' + count).val());
    var lebar = parseInt($('#lebarkm' + count).val());
    var harga = (tinggi * lebar) * 1000;
    $('#hargakm' + count).val(format1(harga, "Rp."));
  });
});

Answer 2

對於簡單地附加事件，這不是循環的好方法。 您可以使用數據屬性以更好，更簡單的方式進行操作。 我猜想您需要在動態生成的輸入字段上附加一個keyup事件。

這是您可以做的；

1. 在視圖中HTML創建時間上，為div每個元素分配一個唯一的id ，例如id="tinggikm#{i}" ，它將像id="tinggikm1" ， id="tinggikm2"一樣呈現。
2. 然后將公共類（即“ my_keyup_input”）添加到要在其上調用keyup方法的輸入字段。 重要！ 根據您的語言，為唯一計數添加data屬性，例如data-count="#{i}" 。

3. 最后，在jQuery中，您可以使用類選擇器監聽事件，如下所示：

     $(document).ready(function(){ $('.my_keyup_input').on('keyup', function(){ // Lets get the count to uniquely identify our related div elements var count = $(this).data('count'); var tinggi=parseInt($('#tinggikm'+count).val()); var lebar=parseInt($('#lebarkm'+count).val()); var harga=(tinggi * lebar) * 1000; $('#hargakm'+count).val(format1(harga, "Rp.")); }); }); 

Answer 3

基於創建的html，一個選項是捕獲所有鍵入內容，並使用包含的.form-group查找相應的輸入和值。 這樣就無需引用特定的已創建ID。 通過更改html的創建方式，可以使用更有效的方法，但是以下方法可以使用當前功能：

$('#keranjang').on('keyup', function(e){ //bind on keyup for entire container (no loop)
    var inp = $(e.target), //the input for which the keyup was captured
        grp=inp.closest('.form-group') //the group the input is in
      inputs = grp.find('.form-control'), //all inputs
        lbl = inputs.filter(':disabled'); //the disabled input is the total (if possible: using specific classes for the inputs and labels would be better)
  lbl.val(inputs.not(lbl).toArray().reduce(function(t,i){return t * parseInt(i.value);}, 1000)); //use reduce on the other inputs, to multiply them with each other (with a base of 1000)  
});

小提琴