如何使我的技能圖表使用年級字母而不是百分比？

Question

我到處都在尋找這種特殊需求，但找不到任何好的資源。 我有一個“技能”圖，顯示了我能很好地完成事情。 我的問題是我不希望它顯示百分比，而是字母等級（A +，A，B，C）

鏈接在這里

這是代碼

 <script type="text/javascript"> window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; function grow() { var element = '.bar'; var i = 1; $(element).each(function(index, value) { var percent = $(this).attr('data-percent'); var timing = percent / 100; setTimeout(function() { $(value).css('max-width', +percent + '%').css('transition', timing + 's ease all'); $(value).append('<div class="num">' + percent + '%</div>'); }, i * 50); i++; }); } $(window).load(function() { requestAnimationFrame(grow); }); </script> 

 .bar { background: white; border-top: 1px solid #b4996d; width: 100%; max-width: 0; height: 25px; margin: 0 0 10px 0; border-top-style: dotted; } .num { line-height: 22px; color: #b4996d; font-size: 12px; text-align: right; font-family: 'open_sansbold'; } .label-graph { line-height: 22px; position: absolute; color: #333; font-size: 12px; font-family: 'open_sansbold'; } .holder { margin: 0 auto; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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"/> <div class="holder"> <div class="bar" data-percent="95"> <span class="label-graph">Web Design</span> </div> <div class="bar" data-percent="95"> <span class="label-graph">Graphic Design</span> </div> <div class="bar" data-percent="95"> <span class="label-graph">Photoshop</span> </div> <div class="bar" data-percent="80"> <span class="label-graph">HTML5</span> </div> <div class="bar" data-percent="90"> <span class="label-graph">Illustration</span> </div> <div class="bar" data-percent="85"> <span class="label-graph">Print</span> </div> </div> 

Answer 1

這是一個簡單的示例，其中@lux在注釋中提出了建議。 您可以使用data-percent屬性添加條件，條件是：)

在這里看到

$(function(){
  $('.bar').each(function(i,v){
    data = $(this).data('percent');
    // just an example, you can set whatever you wants as value and conditions
    if(data > 80){
      $(this).addClass('grade-Aplus');
    }
    else if(data <= 80 && data > 60){
      $(this).addClass('grade-A');
    }else{
      $(this).addClass('grade-B');
    }               
  });
});

的CSS

.bar:before {content:""; width: 0; height: 30px; background: blue; position: absolute; left: 0; top: 0; transition: all 0.5s; }
.bar { position: relative; margin: 15px 0; padding: 7px 0 0 110px}

.bar.grade-Aplus:before { width: 100px; content: "A+"; color: #fff;}
.bar.grade-A:before { width: 80px; content: "A"; color: #fff}
.bar.grade-B:before { width: 30px; content: "B"; color: #fff}

/* and so on ... :) */