1

我试图制作 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;           
              }           
          });   
        });
    });

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

这很好用，但问题是它每次都会检测到输入变化的变化。因此，如果我填写输入并第二次填写，那么进度条会再次增加。

是否有任何解决方案可以让我检测到输入的第一次更改并在更改后停止进度条？

4

2 回答 2

2

您可以做的是创建一个类，比如说“有效”，当用户输入任何使输入元素有效的内容时，然后将该类添加到输入元素，否则将其删除。

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

在这里找到工作代码。

于 2015-02-19T07:13:03.903 回答
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);
                  }           
              });   
            });
        });
于 2015-02-19T07:16:45.150 回答