如何在jQuery中填充循环类型百分比验证

Question

我有五个输入字段，我需要通过显示圆形类型验证模式来验证所有字段。它会动态增加。

请查找附带的样本验证图片。

以下是代码：

$("#field1, #field2, #field3").blur(function() {
    var getImageName = $('#step-dwld').attr('src').slice(7, 30);
    if( !this.value ){
            $('#step-dwld').attr('src', 'images/'+getImageName);
    } else{
    switch (getImageName) {
        case "step-bg.png":
            $('#step-dwld').attr('src', "images/step-1.png"); 
            break;
        case "step-1.png":
            $('#step-dwld').attr('src', "images/step-2.png"); 
            break;
        case "step-2.png": 
            $('#step-dwld').attr('src', "images/step-3.png"); 
            break;
        }
    }
});

Answer 1

由于您的代码含糊不清或代码非常少，我们很难猜出您的代码和HTML结构，您需要create a Minimal, Complete, and Verifiable example以便其他人可以帮助您。

然而，检查一下它可能会让你知道如何做到这一点，我现在不用你的代码为什么，并根据猜测我实现了类似的模拟它

JS Fiddle

＆＃13;

＆＃13;

var validate = $('.validate'), score= 0;

validate.on('change', function(){
	score = 0;
	validate.each(function(){
  	if($(this).val() != ''){
    	score += 100 / validate.length;
    }
    console.log(score);
    setImage(score);
  });
});

function setImage(score){
    var url;
    switch (score){
        case 20:
            url = '20%';
            break;
     
        case 40:
    	    url = '40%';
            break;
      
        case 60:
    	    url = '60%';
            break;
      
        case 80:
            url = '80%';
        break;
      
        case 100:
            url = '100%';
            break;
      
        default:
           url = '0%';
    }
    var img = '<img src="//placehold.it/100x100/?text=' +url+ '">';
    $('#img').html(img);
}

＆＃13;

#img{width:100px;height:100px;border:1px solid gray;margin:10px 0;}
input[type="text"]{display:block;margin:2px 0;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="img"></div>
<input type="text" class="validate">
<input type="text" class="validate">
<input type="text" class="validate">
<input type="text" class="validate">
<input type="text" class="validate">
<button id="done">I'm Done!</button>

＆＃13;

＆＃13;

＆＃13;