javascript - 尝试按百分比增加进度条

Question

我正在制作一个类似于 jackbox.tv 的问答游戏，我正在尝试找出我需要的逻辑，以便在玩家正确回答问题时按百分比增加进度条(我想说 +10每个正确回答的问题的百分比)。我发布了一些示例逻辑，但我认为它既不实用也不是编写它的最佳方式。

<script>
  $(document).ready(function () {
    users= [{}];

    // This is the example logic for the animation:

    for(let i = 0; i < users.length; i++) {
      let wid = (users[i].score)*1%
      $('.player1').animate({ width: wid }, 2000)
    }

    $('.player1').animate({ width: '90%' }, 2000);
    $('.player2').animate({ width: '75%' }, 2000);
    $('.player3').animate({ width: '50%' }, 2000);
    $('.player4').animate({ width: '70%' }, 2000);
    $('.player5').animate({ width: '45%' }, 2000);
  });
</script>

Answer 1

您正在寻找这样的东西吗？

$(document).ready(function () {
  
  var players = [
    {
      "id": 1,
      "score": 0.2
    },
    {
      "id": 2,
      "score": 0.5
    }
  ];
  
  for(var index in players){
    var id = players[index].id;
    var score = players[index].score;
    
    console.log(id);
    var selector = ".bar.player" + id;
    var bar = $(selector);
    bar.css("width", 100 * score + "px");
    
  }
}); 

.container {
  display: block;
  margin-top: 40px;
  clear: both;
  
  height: 20px;
  width: 100px;
  background-color: white;
  border: 1px black solid;
}

.bar {
  height: 18px;
  width: 10px;
  background-color: green;
  margin-top: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="bar player1">&nbsp;<div>
<div>

<div class="container">
  <div class="bar player2">&nbsp;<div>
<div>