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事件。

这是你可以做的;

在视图中的HTML创建时间为id中的每个元素分配一个唯一的div，例如id="tinggikm#{i}"，其呈现方式为id="tinggikm1"，id="tinggikm2"。
然后将常用类，即“my_keyup_input”添加到要调用keyup方法的输入字段。重要！根据您的语言，为此data添加唯一计数的data-count="#{i}"属性。

然后最后在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，一个选项是捕获所有keyup并使用包含.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)  
});

Fiddle

jquery可以循环一个函数吗？

3 个答案: