![](/img/trans.png)
[英]Can somebody explain to me why we need a for loop in this function?
[英]jquery can we loop a function?
为什么这种类型的循环无法工作? 如果此函数未循环,则效果很好。 我需要此代码,因为我有动态附加的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>
关于使用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."));
});
});
对于简单地附加事件,这不是循环的好方法。 您可以使用数据属性以更好,更简单的方式进行操作。 我猜想您需要在动态生成的输入字段上附加一个keyup
事件。
这是您可以做的;
div
每个元素分配一个唯一的id
,例如id="tinggikm#{i}"
,它将像id="tinggikm1"
, id="tinggikm2"
一样呈现。 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.")); }); });
基于创建的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)
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.