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");
    }
});

所以基本上我在我的输入字段中写了一些东西然后点击出来，我的进度条增加了。

如果输入字段 returns 在填充后清空进度条会减少。

现在的问题是，我一直在非空输入上点进点出，进度条一直在增加。

Fiddle:

Demo Code

Answer 1

使用以下函数

 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 2

我更新了你的 fiddle：https://jsfiddle.net/1a8qcgdc/10/ 而不是：

var isfilled = 0;

我加了一个class nowFilled，希望对你有帮助

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

function precheckConditions() {
 var progressValue = 0;
  var progressbar = $('.progress-bar');
  $('input').each(function() {  
      if ($(this).val()) {
        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 3

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

查看右上角的示例。

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

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

Jquery / Javascript 蓝色进度条

Jquery / Javascript Progressbar blue

html

javascript

jquery

blur

progress-bar