在循环中生成 Javascript id

Generating a Javascript id in a loop

本文关键字:Javascript id 循环      更新时间:2023-09-26

下面是日期选取器的代码。当我们在 from 字段中选择一个日期时,"to"字段中"发件人"字段下方的所有日期都会被阻止。我想在 for 循环的帮助下生成这些 id,但是当我运行此代码时,文本框仅显示具有"从"和"到"正确功能的日期选择器。

$(function () {
    var frm = 0;
    var tu = 0;
    var i = 0;
    for (i = 1; i <= 5; i++) {
        frm = "#from" + i;
        tu = "#to" + i;
        $(frm).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy/mm/dd',
            maxDate: '-1',
            onSelect: function (selected) {
                $(tu).datepicker("option", "minDate", selected)
            }
        });
        $(tu).datepicker({
            dateFormat: 'yy/mm/dd',
            changeMonth: true,
            changeYear: true,
            maxDate: '-1',
            onSelect: function (selected) {
                $(frm).datepicker("option", "maxDate", selected)
            }
        });
    }
});

HTML 由 PHP 生成for ($a=1;$a<=$i;$a++( {

echo("
    <li>
    <input type='"text'" name='"course_name$a'" class='"jq_watermark required'" placeholder='"Course Name'" title='"$x Certified Course Name'" style='"width:11.6em;'"> 
    <tab></tab>
    <input type='"text'" name='"course_institute$a'" class='"jq_watermark required'" placeholder='"Institute Name'" title='"$x Institute Name'" style='"width:11.6em;'"> 
    <tab></tab>
        <br />
    <input type='"text'" id='"from$a'" name='"course_start_date$a'" class='"required'" placeholder='"Certified Course Start Date'" title='"$x Certified Course Start Date'" style='"width:11.6em;'" readonly='"readonly'"> 
    &nbsp to&nbsp
    <input type='"text'" id='"to$a'" name='"course_end_date$a'" class='"required'" placeholder='"Certified Course End Date'" title='"$x Certified Course End Date'" style='"width:11.6em;'"> 
    <br />
     <input type='"text'" name='"course_city$a'" class='"required'" placeholder='"City'" title='"$x Training Institute City Name!'" style='"width:11.6em;'"> 
    <tab></tab>
     <input type='"text'" name='"course_country$a'" class='" required'" placeholder='"Country'" title='"$x Training Institute Country Name!'" style='"width:11.6em;'"> 
    <tab></tab>
    <button title='"Your Training Certificate Scanned Picture, Please!'">Upload Training Certificate</button>
    </li> 
    ");

}

由于匿名函数创建的闭包,您始终具有相同的frm/tu(应该是to顺便说一句(变量。通过引入一个自调用匿名函数,该函数将这些变量作为参数接收,您可以创建新的变量,从而避免此问题:

$(function () {
    var frm = 0;
    var tu = 0;
    var i = 0;
    for (i = 1; i <= 5; i++) {
        frm = "#from" + i;
        tu = "#to" + i;
        (function (frm, tu) {
            $(frm).datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy/mm/dd',
                maxDate: '-1',
                onSelect: function (selected) {
                    $(tu).datepicker("option", "minDate", selected)
                }
            });
            $(tu).datepicker({
                dateFormat: 'yy/mm/dd',
                changeMonth: true,
                changeYear: true,
                maxDate: '-1',
                onSelect: function (selected) {
                    $(frm).datepicker("option", "maxDate", selected)
                }
            });
        })(frm, tu);
    }
});