Javascript / Jquery 进度条

Question

我创建了一个基本有效的进度条。

Html 看起来像这样：

<div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
       </div>
</div>

我的脚本是这样的：

/* Progress bar */
$("#project_name").blur(function(){
    /* if input not empty progress */
    if($(this).val() !== '' && $(this).val().length > 1) {
        console.log("already written" + $(this).val().length);
    } else if($(this).val() !== '') {
        var progressbar = $('.progress-bar');
        progressbar.width(progressbar.width() + 40);

        console.log("not empty" + $(this).val().length);
    } else {
        console.log("empty");
    }

});

如果输入字段有值，则进度条会增加，如果之后单击其他地方。

但是我发现的问题是，如果我一直点击输入框然后退出，进度条会一直增加。

所以我做了一个应该解决的 if 语句，但现在没有。

这个：

if($(this).val() !== '' && $(this).val().length > 0) {
    console.log("already written" + $(this).val().length);
}

但是还是不行。如果我增加输入的值，它不会再增加进度条，但是如果我保留一个我不增加的值，那么如果我点击进出，进度条会保持增加。

Answer 1

如果你想在用户向输入添加更多内容时增加进度，那么你可以这样做。

更详细的解释。

我们跟踪值是否增加长度的方法是在输入 selected 时设置旧长度（这是通过 .focus 事件完成的）。

根据原始问题，当输入失去焦点（.blur 事件）时，将旧长度与新长度进行比较，如果它增加了，那么我们 select 进度条，但仅如果我们之前没有增加它（因为我们在增加它时添加了 class "increased"）。

现在反过来，我们检查输入是否为空。如果我们之前增加了进度条（它有 class "increased"）然后我们减少它并删除 class。

//Store old value length
$("#project_name").focus(function() {
     $(this).data("oldLen",$(this).val()?$(this).val().length:0);
}); 

$("#project_name").blur(function(){
    var oldLen = $(this).data("oldLen") || 0; //Recall old length
    if($(this).val().length > oldLen) {  //Check if input is now longer
        var progressbar = $('.progress-bar:not(.increased)');
        if (progressbar.length > 0) {
            progressbar.width(progressbar.width() + 40);  
            progressbar.addClass("increased");         
           console.log("Input increased from "+oldLen +" to "+$(this).val().length);
        }
    } else if ($(this).val() == '') { 
         var progressbar = $('.progress-bar.increased');
         if (progressbar.length > 0) {
            progressbar.width(progressbar.width() - 40);  
            progressbar.removeClass("increased");         
           console.log("Input decreased from "+oldLen +" to "+$(this).val().length);
        }

    }
});

针对多个输入元素的更通用的解决方案。这里的假设是，一旦其中包含数据，您就会增加每个元素的进度。此处的变化是您通过输入上的 "filled" class 跟踪进度条增量，并且仅在之前未填写输入时才增加进度。

 //Not checking on length, just checking if more than 0
$("input").blur(function(){ // You can use other selectors for specific inputs like e.g. "#input1, #input2..."
    if($(this).val().length > 0 && !$(this).is("filled")) {  //Check if input is now filled
        var progressbar = $('.progress-bar');
        progressbar.width(progressbar.width() + 40);  
        $(this).addClass("filled");   //Mark input as filled                     

    } else if ($(this).val() == '' && $(this).is(".filled")) { 
         var progressbar = $('.progress-bar');
         progressbar.width(progressbar.width() - 40);  
         $(this).removeClass("filled");  //Mark as unfilled       
    }
});

Javascript / Jquery 进度条

Javascript / Jquery Progress bar

html

javascript

ajax

jquery

progress-bar