为什么这种类型的循环不起作用?如果这个功能没有循环,它可以很好地工作。我需要这个代码,因为我有动态附加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>
答案 0 :(得分:0)
如何使用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."));
});
});
答案 1 :(得分:0)
简单地附加事件循环不是一个好方法。您可以使用数据属性以更好,更简单的方式完成此操作。我猜你需要在动态生成的输入字段上附加keyup
事件。
这是你可以做的;
id
中的每个元素分配一个唯一的div
,例如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."));
});
});
答案 2 :(得分:0)
根据创建的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)
});