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