javascript - 更新 CSS :width onblur with JQuery

Question

所以我正在制作一个简单的进度条，显示每个字段中输入了多少。进度条中的颜色代表在输入或输入组合中输入的不同数量。有没有办法将模糊行为绑定(bind)到 css 宽度属性，并在每次用户输入一些数字并离开该字段时对其进行调整。我想让它绑定(bind)到某个值，这样显示颜色的条形图的每 10% 就代表 100 美元左右。有什么想法吗？

<label for="downPayment" class="form-control-label dpl">Down Payment</label>
<input type="number" class="form-control" id="downPayment" placeholder="$0" onkeypress="return    isNumberKey(event)" onBlur="addCommas(this)"/>
<label for="manufacturerRebate" class="form-control-label mrl">Manufacturer Rebate</label>
<input type="number" class="form-control" id="manufacturerRebate" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>
<label for="tradeInValue" class="form-control-label tivl">Trade-In Value</label>
<input type="number" class="form-control" id="tradeInValue" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>

<br>
<div class="progress">
<div class="progress-bar" style="width: 90%;">
<div class="progress-bar progress-bar-success" style="width: 80%;">
<div class="progress-bar progress-bar-secondary" style="width: 20%;"></div>
</div>
 </div>

CSS:

.progress {
 height: 1.5625em;
 margin-bottom: 0.5em;
 overflow: hidden;
 background-color: #e5e5e5;
 border-radius: 0.0725em;
 text-align: center;
}

/*  The actual progress bar itself */
.progress-bar {
float: left;
width: 0;
height: 100%;
 color: white;
background-color: #0088cc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

.progress-bar-secondary {
background-color: gray;
}

.progress-bar-success {
background-color: #377f31;
}

.progress-bar-danger {
 background-color: #880e14;
}

  .progress-bar-warning {
   background-color: #dba909;
  }

jQuery:

// When the <input>'s value changes

$("#downPayment").change(函数() {

// If the value is less than 7, add a red border
if ($(this).val() < 28435) {
$(".progress-bar-secondary").css("width","10%");
}

// Else if the value is equal to 7, add a green border
else if ($(this).val() == 28435) {
$(".progress-bar-secondary").css("width","20%");
}

// Else if the value is greater than 7, add an orange border
else if ($(this).val() > 28435) {
$(".progress-bar-secondary").css("width","40%");
}

// Else if the value is anything else, add a black border
else {
$(".progress-bar-secondary").css("width","20%");
}

});

Fiddle

Answer 1

你可以使用:

$('#INPUT_ID').blur(function(){
    //do something here....
    // you can update the css via jquery like using the jquery .css()
    // $('.progress').css('width','20%');
});

您可以将此作为引用http://api.jquery.com/blur/和 http://api.jquery.com/css/