Jquery/Javascript进度条蓝

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:0%"></div> 
</div> 

而且我的JavaScript是这样的：

$("input").blur(function(){ 
    var progressbar = $('.progress-bar'); 
    if($(this).val().length > 0 && !$(this).is("filled")) { 
     progressbar.width(progressbar.width() + 40); 
     $(this).addClass("filled"); 
    } else if ($(this).val() == '' && $(this).is(".filled")) { 
     progressbar.width(progressbar.width() - 40); 
     $(this).removeClass("filled"); 
    } 
}); 

所以基本上我写的东西在我的输入框，然后点击了，我的进度增加。

如果输入字段填充后返回为空，则进度条会减少。

现在的问题是，我不断点击进出一个非空输入，进度条不断增加。

小提琴：

Demo Code

Answer 1

我已经更新您的提琴：https://jsfiddle.net/1a8qcgdc/10/和代替：

var isfilled = 0; 

我添加了一个类nowFilled，希望它有助于

$(document).ready(function() { 
 
    precheckConditions(); 
 
    addToProgressbar(); 
 
}) 
 

 
function precheckConditions() { 
 
\t var progressValue = 0; 
 
    var progressbar = $('.progress-bar'); 
 
    $('input').each(function() { 
 
     if ($(this).val()) { 
 
     \t progressValue += 40; 
 
     $(this).addClass('filled'); 
 
     } 
 
    }); 
 
    progressbar.width(progressbar.width() + progressValue); 
 
} 
 

 

 
function addToProgressbar() { 
 
    $('input').blur(function() { 
 
    var progressbar = $('.progress-bar'); 
 
    if ($(this).val().length > 0 && !$(this).is("filled") && !$(this).hasClass('filled')) { 
 
     progressbar.width(progressbar.width() + 40); 
 
     $(this).addClass("filled"); 
 
    } else if ($(this).val() == '' && $(this).is(".filled")) { 
 
     progressbar.width(progressbar.width() - 40); 
 
     $(this).removeClass('nowFilled') 
 
     $(this).removeClass("filled"); 
 
    } 
 
    }); 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

 
<input type="text" class="form-control" name="project_name" placeholder="Placeholder" value='Pre added value'> 
 
<input type="text" class="form-control" name="asd" placeholder="Placeholder" value='Pre added second value'>

Answer 2

使用下面的函数

function test() { 
var x = 0; 
$('input').each(function(){//change this with your input class 
    if ($(this).val() != '') { 
    x++; 
    } 
}); 
return x 
} 
$("input").blur(function(){ 
    var progressbar = $('.progress-bar'); 
    var x = test(); 
    if($(this).val().length > 0 && !$(this).is(".filled")) { 

     progressbar.width(40*x); 
     $(this).addClass("filled"); 
    } else if ($(this).val() == '' && $(this).is(".filled")) { 
      progressbar.width(40*x); 
     $(this).removeClass("filled"); 
    } 
}); 

https://jsfiddle.net/1a8qcgdc/3/

Answer 3

你可以使用http://jqueryui.com/progressbar/

退房的例子右上角。

所有选项：http://api.jqueryui.com/progressbar/

$(function() { 
    $("#progressbar").progressbar({ 
    value: 37 
    }); 
});