Создание идентификатора Javascript в цикле

Question

Ниже приведен код для datepicker. Когда мы выбираем дату из поля, все даты в поле «Кому», которые находятся ниже поля «from», блокируются. Я хочу сгенерировать эти идентификаторы с помощью цикла for, но когда я запускаю этот код, в текстовом поле отображается только датапикер с правильной функциональностью «от» и «до».

$(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 для ($ а = 1; $ в < = $ I; $ а ++) {

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 кстати.) переменная. Внедряя анонимную функцию самозапуска, которая получает эти переменные в качестве параметров, которые вы создаете новые, избегая этой проблемы:

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