jquery-ui ：检测输入的第一次变化

Question

我试图制作 jquery-ui 进度条，显示表单中填写输入的进度。我的代码如下：

html:

    <div id="progress" class="progress"></div>
   //form and inputs

脚本：

$(document).ready(function(){

    var elementcount = document.getElementById("events").length;

    var totallength = 100;

    var relativelength = totallength/elementcount;

    var initial = 0;

    $('#progress').progressbar({
        value: initial,     
    });

    $('#events').find(':input').each(function(){    

          $(this).change(function(){

              if($(this).val()==""){                  
                     var value =   initial - relativelength;
                     $('#progress').progressbar("value",value);
                     initial = value;
              }           
              else{               
                  var value =   initial + relativelength;
                  $('#progress').progressbar("value",value);
                  initial = value;           
              }           
          });   
        });
    });

在上面的代码中我先算了没有。表单中的元素并设置相对长度（每个填充输入要增加的长度）。进度条随着输入值的变化而增加。如果输入值被清空（即空白），则它会减少。

这工作正常，但问题是每次输入变化时它都会检测到变化。因此，如果我填写输入并第二次填写，则进度条再次增加。

是否有任何解决方案可以检测输入的第一次变化并在该变化后停止进度条？

Answer 1

你可以做的是做一个class，比如说'valid'，当用户输入任何使输入元素有效的东西时，然后将class添加到输入中元素，否则将其删除。

$(this).change(function(){

          if($(this).val()==""){                  
                 var value =   initial - relativelength;
                 $('#progress').progressbar("value",value);
                 initial = value;
                 $(this).removeClass('valid');
          }           
          else if(!$(this).hasClass('valid')){               
              var value =   initial + relativelength;
              $('#progress').progressbar("value",value);
              initial = value;
              $(this).addClass('valid');
          }           
      });

找到工作代码here。

Answer 2

您可以使用数组，当输入字段中添加文本时添加一项，当输入字段变空时删除一项，如下所示-

    var items = [];
    $('#events').find(':input').each(function(){    
              $(this).change(function(){
                  if($(this).val()==""){                  
                         items.slice(0);
                         $('#progress').progressbar("value",items.length);
                  }           
                  else{               
                      items.push('1');
                      $('#progress').progressbar("value",items.length);
                  }           
              });   
            });
        });

jquery-ui ：检测输入的第一次变化

jquery-ui : detect first time change in input

html

javascript

jquery

jquery-ui

jquery-ui-progressbar