Jquery/Javascript进度条蓝色

我试图构建一个简单的progressbar，但遇到了一些问题

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>

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

所以基本上我在我的输入栏中写了一些东西，然后单击out，我的progressbar就会增加

如果输入字段在填充后返回为空，则progressbar将减小

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

小提琴：

---

使用以下功能

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

---

我更新了你的小提琴：而不是：

var isfilled = 0;

我现在加了一个班，希望有帮助

$（文档）.ready（函数（）{
预先检查条件（）；
addToProgressbar（）；
})
函数预检查条件（）{
var progressValue=0；
var progressbar=$（'.progressbar'）；
$（'input'）。每个（函数（）{
if（$（this.val（））{
进程值+=40；
$（this.addClass（'filled'）；
}
});
progressbar.width（progressbar.width（）+progressValue）；
}
函数addToProgressbar（）{
$（'input'）.blur（函数（）{
var progressbar=$（'.progressbar'）；
if（$（this.val（）.length>0&&！$（this.is（'filled'）&&！$（this.hasClass（'filled'））{
progressbar.width（progressbar.width（）+40）；
$（此）.addClass（“填充”）；
}else如果（$（this.val（）=''&$（this.is）（.filled）））{
progressbar.width（progressbar.width（）-40）；
$（this.removeClass（'nowFilled'））
$（此）.removeClass（“填充”）；
}
});
}

您可以使用

查看右上角的示例

所有选项：

---

它应该是

&&$（this）.is（“.filled”）

在第3行，您错过了一个

（类选择器符号）奇怪，为什么会发生这种情况？@johndeslegacy您得出了什么结论？这很好，谢谢，您能解释一下我做错了什么吗如果您只使用一个输入框，您没有做错什么，但是，当您有多个框时，您需要以某种方式检查该框是否已被编辑。这就是为什么我将一个类添加到已编辑的特定inputbox中。然后在第一个if语句中，我检查指定的inputbox是否已填充。您如何使用占位符对空输入执行此操作抱歉，我不是指占位符我的意思是，如果输入已经具有名称之类的值，我想立即增加processbar，您将如何管理它，目前它“忽略它”；不错，但不适用于具有值的多个输入

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