Question

我做了什么

我创建了一个动态添加日期时间选择器的页面，但现在遇到了一些问题：

    for(i=0;i<5;i++){
             counter=i;
             var appendTxt = "<div style='display:none' class='divRow5 HideSchedule'><div class='divCellouter4'><div class='divCell2 rowwidth13 brdrStl4'><input name='NEW_STARTdatetime[]' class='dtpkr' type='textbox' readonly='readonly' id='NEW_STARTdatetime["+counter+"]' value='' autocomplete='off' size='10' /></div><div class='divCell2 rowwidth13  brdrSt14'><input name='NEW_ENDdatetime[]' readonly='readonly' autocomplete='off' class='dtpkr' type='textbox' id='NEW_ENDdatetime["+counter+"]' value='' size='10' /></div><div class='divCell2 rowwidth13  brdrSt14'><input name='NEW_START_TIME[]' type='textbox' class='tmpkr' id='NEW_START_TIME["+counter+"]' value='' size='10' /></div><div class='divCell2 rowwidth13  brdrSt14'><input name='NEW_END_TIME[]' type='textbox' class='tmpkr' id='NEW_END_TIME["+counter+"]' value='' size='10' /></div><div class='divCell2 rowwidth8   brdrSt14'><input type='checkbox' name='new_promo_chk[]' id='new_promo_chk["+counter+"]' class='checkbox regular-checkbox big-checkbox' checked /><label for='new_promo_chk["+counter+"]'></label></span> </div></div><div class='divCell2 handcursor'> <img class='del' src='images/delete.png' /></div></div>";
             $('[id$="NEW_STARTdatetime\\['+counter+'\\]"]').datetimepicker({
                   // minDate:'-1970/01/02',
                    format:'Y/m/d',                
                    onShow:function( ct ){                                
                        this.setOptions({
                         maxDate:$('#NEW_ENDdatetime\\['+counter+'\\]').val()?$('#NEW_ENDdatetime\\['+counter+'\\]').val():false
                        })
                    },
                    timepicker:false     
            });
            $('[id$="NEW_ENDdatetime\\['+counter+'\\]"]').datetimepicker({
                    //minDate:'-1970/01/02',
                    format:'Y/m/d',                
                    onShow:function( ct ){
                        console.log('#NEW_STARTdatetime\\['+counter+'\\]');
                        console.log($('#NEW_STARTdatetime\\['+counter+'\\]').val());
                              this.setOptions({
                               minDate:$('#NEW_STARTdatetime\\['+counter+'\\]').val()?$('#NEW_STARTdatetime\\['+counter+'\\]').val():false
                              })
                          },
                    timepicker:false          
            }); 
    }

所以现在在 onshow 时，它需要计数器的最新值 所以我的逻辑失败了，那么如何解决呢？

Answer 1

这是一个关闭惊喜的简单案例。只需将功能移至方法并从循环中调用它，然后在每个回合中传递它counter。像这样：

var myMethod = function myMethod (counter){
  var appendTxt = "<div style='display:none' class='divRow5 HideSchedule'><div class='divCellouter4'><div class='divCell2 rowwidth13 brdrStl4'><input name='NEW_STARTdatetime[]' class='dtpkr' type='textbox' readonly='readonly' id='NEW_STARTdatetime["+counter+"]' value='' autocomplete='off' size='10' /></div><div class='divCell2 rowwidth13  brdrSt14'><input name='NEW_ENDdatetime[]' readonly='readonly' autocomplete='off' class='dtpkr' type='textbox' id='NEW_ENDdatetime["+counter+"]' value='' size='10' /></div><div class='divCell2 rowwidth13  brdrSt14'><input name='NEW_START_TIME[]' type='textbox' class='tmpkr' id='NEW_START_TIME["+counter+"]' value='' size='10' /></div><div class='divCell2 rowwidth13  brdrSt14'><input name='NEW_END_TIME[]' type='textbox' class='tmpkr' id='NEW_END_TIME["+counter+"]' value='' size='10' /></div><div class='divCell2 rowwidth8   brdrSt14'><input type='checkbox' name='new_promo_chk[]' id='new_promo_chk["+counter+"]' class='checkbox regular-checkbox big-checkbox' checked /><label for='new_promo_chk["+counter+"]'></label></span> </div></div><div class='divCell2 handcursor'> <img class='del' src='images/delete.png' /></div></div>";
  $('[id$="NEW_STARTdatetime\\['+counter+'\\]"]').datetimepicker({
    // minDate:'-1970/01/02',
    format:'Y/m/d',                
    onShow:function( ct ){                                
    this.setOptions({
     maxDate:$('#NEW_ENDdatetime\\['+counter+'\\]').val()?$('#NEW_ENDdatetime\\['+counter+'\\]').val():false
    })
    },
    timepicker:false     
    });
  $('[id$="NEW_ENDdatetime\\['+counter+'\\]"]').datetimepicker({
    //minDate:'-1970/01/02',
    format:'Y/m/d',                
    onShow:function( ct ){
      console.log('#NEW_STARTdatetime\\['+counter+'\\]');
      console.log($('#NEW_STARTdatetime\\['+counter+'\\]').val());
      this.setOptions({
       minDate:$('#NEW_STARTdatetime\\['+counter+'\\]').val()?$('#NEW_STARTdatetime\\['+counter+'\\]').val():false
     })
    },
    timepicker:false          
  }); 
}

for(i=0;i<5;i++){
 myMethod(i);
}

现在解释一下。 onshow将异步激活，很可能是在你的循环结束后。因此它只获得计数器的最后一个值。通过将其移动到方法中，每次调用它时都会创建一个新范围。因此，保留了传递的值。

PS：我没有检查是否有任何语法错误。

动态datetimepicker问题

1 个答案: