Question

以下是datepicker的代码。当我们从字段中选择日期时，“to”字段中位于“from”字段下方的所有日期都将被阻止。我希望在for循环的帮助下生成这些id，但是当我运行此代码时，文本框只显示具有“from”和“to”的正确功能的datepicker。

$(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＆lt; = $ 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> 
    ");

}

Answer 1

由于您的匿名函数创建了闭包，因此您始终拥有相同的frm / tu（应该是to btw。）变量。通过引入一个自调用匿名函数来接收这些变量作为参数，您可以创建新的函数来避免这个问题：

$(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);
    }
});

在循环中生成Javascript id

1 个答案: