Question

我有一个5星级用户评分系统，希望进度条能够相应地加载，即，如果用户具有2 5-star个评分和10 1-star个评分，进度条应显示此内容。到目前为止，我检索了用户费率（1到5）并将其存储在数组中，即

var rate= {
  str1: 100,
  str2: 20,
  str3: 30,
  str4: 40,
  str5: 50
};

然后我按升序对数组进行排序

function bySortedValue(obj, callback, context) {
  var tuples = [];

  for (var key in obj) tuples.push([key, obj[key]]);

  tuples.sort(function(a, b) {
    return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0
  });

  var length = tuples.length;
  while (length--) callback.call(context, tuples[length][0], tuples[length][1]);
}
//example
bySortedValue(arru, function(key, value) {
  document.getElementById('res').innerHTML += `${key}: ${value}<br>`;
  


});

然后我有另一个数组，该数组根据速率数组的速率大小保存要加载的aria值，即，最低的等级将获得28% width的值

var aria= [28,48,68,88,98];

我的问题是我无法弄清楚如何将所有这些东西捆绑在一起，以便通过jquery加载到进度栏中，看起来像这样

<div class="progblock">
  <a href="javascript:void(0)" class="link-muted str-nmb-5">
    <div class="progress skill-bar ">
      <div class="prgbfi progress-bar progress-bar-success" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100">
        <span class="skill five-rt">5 <i class="fa fa-star"></i> <i class="fa fa-user val"> 50</i></span>
      </div>
    </div>
  </a>

  <a href="javascript:void(0)" class="link-muted str-nmb-4">
    <div class="progress skill-bar">
      <div class="prgbfo progress-bar progress-bar-info" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100">
        <span class="skill four-rt">4 <i class="fa fa-star"></i> <i class="fa fa-user val"> 40</i></span>
      </div>
    </div>
  </a>

  <a href="javascript:void(0)" class="link-muted str-nmb-3">
    <div class="progress skill-bar">
      <div class="prgbth progress-bar progress-bar-warning" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100">
        <span class="skill three-rt">3 <i class="fa fa-star"></i> <i class="fa fa-user val"> 30</i></span>
      </div>
    </div>
  </a>

  <a href="javascript:void(0)" class="link-muted str-nmb-2">
    <div class="progress skill-bar">
      <div class="prgbtw progress-bar progress-bar-danger" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100">
        <span class="skill two-rt">2 <i class="fa fa-star"></i> <i class="fa fa-user val"> 20</i></span>
      </div>
    </div>
  </a>

  <a href="javascript:void(0)" class="link-muted str-nmb-1">
    <div class="progress skill-bar">
      <div class="prgbon progress-bar progress-bar-dis" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
        <span class="skill one-rt">1 <i class="fa fa-star"></i> <i class="fa fa-user val"> 100</i></span>
      </div>
    </div>
  </a>
</div>

更新

这里是fiddle

Answer 1

您可以这样做

$(document).ready(function(){
var aria= [28,48,68,88,98];
for(i=0; i < aria.length; i++){

$('.progblock').append('<a href="javascript:void(0)" class="link-muted str-nmb-5"><div class="progress skill-bar "><div class="prgbfi progress-bar progress-bar-success" role="progressbar" aria-valuenow="' + aria[i] + '" aria-valuemin="0" aria-valuemax="100"><span class="skill five-rt">5 <i class="fa fa-star"></i> <i class="fa fa-user val"> 50</i></span></div></div></a>');
}
$('.progress .progress-bar').css("width", function() {
  return $(this).attr("aria-valuenow") + "%";
});
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="progblock">

</div>

下方

Answer 2

弄清楚了

arru = {
  prgbon: res[index].Son,
  prgbtw: res[index].Stw,
  prgbth: res[index].Sth,
  prgbfo: res[index].Sfo,
  prgbfi: res[index].Sfi
};

nar = [];

bySortedValue(arru, function(key, value) {
  
  nar.push(key);

});

$('.progress .' + nar[0]).css("width", function() {
  return $(this).attr("aria-valuenow") + "28%";
});
$('.progress .' + nar[1]).css("width", function() {
  return $(this).attr("aria-valuenow") + "48%";
});
$('.progress .' + nar[2]).css("width", function() {
  return $(this).attr("aria-valuenow") + "68%";
});
$('.progress .' + nar[3]).css("width", function() {
  return $(this).attr("aria-valuenow") + "88%";
});
$('.progress .' + nar[4]).css("width", function() {
  return $(this).attr("aria-valuenow") + "98%";
});

现在按ASCII或DESC顺序根据预定数字加载aria值

2 个答案: