Question

我到处寻找这个特定需求，但找不到任何好的消息来源。我有一个＆＃39;技能＆＃39;图表显示我可以完成的事情。我的问题是，我不希望它显示百分比，而是字母等级（A +，A，B，C）

这是代码

＆＃13;

<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>

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

以下是一个简单的示例，其中包含@lux在评论中建议的内容。您可以使用data-percent属性添加条件，并且它在:)上

See it here

$(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 ... :) */

如何使我的技能图表使用成绩字母而不是百分比？

1 个答案: