Fatal编程技术网
  • javascript/
  • Javascript 在for循环中使用绑定事件

Javascript 在for循环中使用绑定事件

javascript jquery html

Javascript 在for循环中使用绑定事件,javascript,jquery,html,Javascript,Jquery,Html,我有以下代码来填充每个输入行上任何表单字段的更改或按键事件后的隐藏字段： $(".leave_row_0").bind("keydown change", function(e) { $(".leave_hidden_0").val("1"); }); $(".leave_row_1").bind("keydown change", function(e) { $(".leave_hidden_1").val("1"); }); $(".leave_row_2").bind("key

我有以下代码来填充每个输入行上任何表单字段的更改或按键事件后的隐藏字段：

$(".leave_row_0").bind("keydown change", function(e) {
  $(".leave_hidden_0").val("1");
});

$(".leave_row_1").bind("keydown change", function(e) {
  $(".leave_hidden_1").val("1");
});

$(".leave_row_2").bind("keydown change", function(e) {
  $(".leave_hidden_2").val("1");
});
但是，我不知道在任何给定时间页面上显示的总行数，因此我需要动态地编写此代码。我编写了一个for循环来简化事情，但由于某种原因，当我尝试以这种方式执行它时，代码停止工作：

var k = 0;
for (k = 0; k < leave_requests.length; k++) {
  $(".leave_row_" + k).bind("keydown change", function(e) {
    $(".leave_hidden_" + k).val("1");
  });
}

var k=0；
对于（k=0；k
关于我可能遗漏的额外成分有什么想法吗

以下是我的html结构：

i = 0;
                    json[2].forEach(function(leave){
                        leave_requests.push(
                            '<div class="row">' +
                                '<div class="col-sm-2 low-padding-right">' +
                                    '<input type="text" value="' + format_date(json[2][i]['leave_date'], 'leave') + '" name="leave_date[]" class="leave_row_' + i + ' form-control" readonly>' +
                                '</div>' + 
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="leave_row_' + i + ' form-control" name="day_part[]" id="day_part" style="width: 100%;">' +
                                        '<?php foreach($dayparts as $daypart){ ?>' +
                                            '<option value="{{ $daypart->daypart_id }}">{{$daypart->daypart}}</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="leave_row_' + i + ' form-control" name="leave_type[]" id="leave_type" style="width: 100%;">' +
                                        '<?php foreach($leave_types as $leave_type){ ?>' +
                                            '<option value="{{ $leave_type->leave_type_type_id }}">{{ $leave_type->leave_type_type }}</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                                '<div class="col-sm-4 low-padding">' +
                                    '<input type="text" value="' + filter_null_values(json[2][i]['leave_notes']) + '" name="leave_notes[]" class="leave_row_' + i + ' form-control">' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +                            
                                    '<input type="text" value="' + (json[2][i]['employee_first_name']).charAt(0) + json[2][i]['employee_last_name'] + '" name="last_updated[]" class="leave_row_' + i + ' form-control" readonly>' +
                                '</div>' +
                                '<div class="col-sm-2 low-padding">' +            
                                    '<input type="text" value="' + format_date(json[2][i]['leave_updated_time'], 'updated') + '" name="leave_updated_time[]" class="leave_row_' + i + 'form-control" readonly>' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="form-control" class="leave_row_' + i + ' name="status[]" id="status" style="width: 100%;">' +
                                        '<?php foreach($status_names as $name){ ?>' +
                                            '<option value="' + json[2][i]['status_name'] + '" name="status" class="form-control">' + json[2][i]['status_name'] + '</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                            '<input type="hidden" value="" name="leave-hidden" class="leave_hidden_' + i + ' form-control" readonly>'                           
                        );

                        i++;
                    });

i=0；
json[2]。forEach（函数（左）{
离开(
'' +
'' +
'' +
'' + 
'' +
'' +
'' +
“{{$daypart->daypart}”+
'' +
'' +
'' +
'' +
'' +
'' +
“{{$leave\u type->leave\u type}”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +                            
'' +
'' +
'' +            
'' +
'' +
'' +

“您可以选择所有类名以
leave\u row\uu
开头的行，
循环并绑定每行的事件。由于隐藏字段和行将具有相同的数字后缀，请将其拆分并执行其余操作


$("[class^=leave_row_]").each(function(i, elem) {
   $(`.${elem.className}`).bind("keydown change", function(e) {
        $(".leave_hidden_"+e.target.className.split('_')[2]).val("1");
   });
})


在下面的演示中使用的是
bind
，这是不推荐使用的
on
。仅用于演示type=“hidden”是type=“text”



$（“[class^=leave\u row\uz]”）。每个（函数（i，elem）{
$（`.${elem.className}`）。打开（“按键更改”，函数（e）{
//log（e.target.className）；
$（“.left_hidden_uu”+e.target.className.split（“'）[2]）.val（“1”）；
});
})


在保留行和保留隐藏这两种情况下，使用公共类而不是用类递增数字。无需使用循环，即使您可以使用下面的“this”Plz检查，我不确定您是否在DOM中已经存在隐藏字段，因为您在创建保留行时，必须在DOM中存在保留隐藏字段


$(".leave_row").bind("keydown change", function(e) {
 $(this).siblings('.leave_hidden').val(1);
});



别担心，我现在已经用兄弟姐妹和遍历DOM元素解决了这个问题，所以Pramukh的回答部分是正确的：


json[2].forEach(function(leave){
                        leave_requests.push(
                            '<div class="row">' +
                                '<div class="col-sm-2 low-padding-right">' +
                                    '<input type="text" value="' + format_date(json[2][i]['leave_date'], 'leave') + '" name="leave_date[]" class="leave_row form-control" readonly>' +
                                '</div>' + 
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="leave_row form-control" name="day_part[]" id="day_part" style="width: 100%;">' +
                                        '<?php foreach($dayparts as $daypart){ ?>' +
                                            '<option value="{{ $daypart->daypart_id }}">{{$daypart->daypart}}</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="leave_row form-control" name="leave_type[]" id="leave_type" style="width: 100%;">' +
                                        '<?php foreach($leave_types as $leave_type){ ?>' +
                                            '<option value="{{ $leave_type->leave_type_type_id }}">{{ $leave_type->leave_type_type }}</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                                '<div class="col-sm-4 low-padding">' +
                                    '<input type="text" value="' + filter_null_values(json[2][i]['leave_notes']) + '" name="leave_notes[]" class="leave_row form-control">' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +                            
                                    '<input type="text" value="' + (json[2][i]['employee_first_name']).charAt(0) + json[2][i]['employee_last_name'] + '" name="last_updated[]" class="leave_row form-control" readonly>' +
                                '</div>' +
                                '<div class="col-sm-2 low-padding">' +            
                                    '<input type="text" value="' + format_date(json[2][i]['leave_updated_time'], 'updated') + '" name="leave_updated_time[]" class="leave_row form-control" readonly>' +
                                '</div>' +
                                '<div class="col-sm-1 low-padding">' +
                                    '<select class="form-control" class="leave_row" name="status[]" id="status" style="width: 100%;">' +
                                        '<?php foreach($status_names as $name){ ?>' +
                                            '<option value="' + json[2][i]['status_name'] + '" name="status" class="form-control">' + json[2][i]['status_name'] + '</option>' +
                                        '<?php } ?>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                            '<input type="hidden" value="" name="leave-hidden" class="leave_hidden form-control" readonly>'                           
                        );

                        i++;
                    });

$(".leave_row").bind("keydown change", function(e) {
                    $(this).parent().parent().next('.leave_hidden').val(1);
                });



json[2].forEach（函数（左）{
离开(
'' +
'' +
'' +
'' + 
'' +
'' +
'' +
“{{$daypart->daypart}”+
'' +
'' +
'' +
'' +
'' +
'' +
“{{$leave\u type->leave\u type}”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +                            
'' +
'' +
'' +            
'' +
'' +
'' +
'' +
'' +
''+json[2][i]['status_name']+''+
'' +
'' +
'' +
'' +
''                           
);
i++；
});
$（“.left_row”）.bind（“按键更改”，函数（e）{
$（this.parent（）.parent（）.next（'.leave_hidden'）.val（1）；
});

<代码> > <代码> bDand（）/<代码>的重复副本从3起折旧。您可能需要考虑使用<代码>（）<代码>。也请张贴相应的HTML代码。这可以用闭包来解决（如@ VLAZ的评论所建议）。然而，一个更好的方法是完全摆脱增量类和正在使用的循环。相反，在所有
元素上使用一个公共类。保留行
元素，然后使用DOM遍历查找相关的
。保留隐藏的
元素，并更新其
val（）
。如果您想了解如何执行此操作的示例，请将您的HTML添加到问题中。类名不仅仅是
左行
，而且每个类名都有一个数字后缀row@RobertYoung如果可能的话，您可以显示您的HTML结构。@Bilalsidqui正是这个答案的重点；为了避免使用
split对字符串进行丑陋的黑客攻击（“uu”）
etc@RoryMcCrossan