0

以下は、日付ピッカーのコードです。fromフィールドで日付を選択すると、「from」フィールドの下にある「to」フィールドのすべての日付がブロックされます。forループを使用してこれらのIDを生成したいのですが、このコードを実行すると、テキストボックスに「from」と「to」の適切な機能を備えた日付ピッカーのみが表示されます。

$(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によって生成されます（$ 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> 
    ");

}

4

1 に答える 1

0

匿名関数によって作成されたクロージャにより、常に同じ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);
    }
});
于 2012-05-22T06:43:46.210 に答える