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

使用以下功能

 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

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

var isfilled = 0;

我现在添加了一个类填充，希望它有帮助

＆＃13;

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

＆＃13;

<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'>

＆＃13;

Answer 3

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

查看右上角的示例。

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

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

Jquery / Javascript Progressbar蓝色

3 个答案: