为每张卡片添加一个进度条

Question

我是 PHP 和 Javascript 的新手，我用 PHP 编写了一些显示在卡片上的计时器。 对于屏幕上的每张卡片，我需要添加一个计时器和一个进度条。 所以，我已经有了计时器和进度条

我正在寻找一种制作进度条的方法

我编写了这样的代码

<progress class="timer1" value="0" max="100">
</progress> 
<script>
            var ar;
             $(document).ready(function(){
               var _sI=[];
               $.ii=function(){
                 ar=arguments;
                 if(ar.length==3){
                   if(_sI[ar[0]]==undefined){
                     _sI[ar[0]]={};
                     }else{
                       clearInterval(_sI[ar[0]].reg);
                       } _sI[ar[0]].fn=ar[2];
                       _sI[ar[0]].t=ar[1];
                       _sI[ar[0]].reg=setInterval(ar[2],ar[1]);
                       }else if(ar.length==1){
                         clearInterval(_sI[ar[0]].reg);
                         }}});
            $(document).ready(function () {
                  var value = localStorage.getItem("timer1_value") || 0;
                  $('.timer1').val(value);
                  $.ii('t1', 36000, function () {
                      var t1v = $('.timer1').val();
                      if (t1v < 100) {
                          $('.timer1').val(t1v + 1);
                          localStorage.setItem("timer1_value", t1v + 1)
                      } else {
                          localStorage.removeItem("timer1_value");
                          $.ii('t1');
                      }
                  });
              });
            </script>

是的，这对我有用，除了每个元素的进度条

我将所有行都放在查询中，获取的数据（MariaDB Mysql）类似于

$row[0] //ID
$row[1] //serial number
//bla bla bla

我知道我只需要每个元素的 ID，但我不知道如何将它放在我的代码中......我在想这样的事情

<progress class='<?= timer . $row[0] ?>'  value="0" max="100">
            </progress> 
            <script>
            var ar;
             $(document).ready(function(){
               var _sI=[];
               $.ii=function(){
                 ar=arguments;
                 if(ar.length==3){
                   if(_sI[ar[0]]==undefined){
                     _sI[ar[0]]={};
                     }else{
                       clearInterval(_sI[ar[0]].reg);
                       } _sI[ar[0]].fn=ar[2];
                       _sI[ar[0]].t=ar[1];
                       _sI[ar[0]].reg=setInterval(ar[2],ar[1]);
                       }else if(ar.length==1){
                         clearInterval(_sI[ar[0]].reg);
                         }}});
            $(document).ready(function () {
                  var value = localStorage.getItem("timer1_value") || 0;
                  $('<?= '.' . timer . $row[0] ?>').val(value);
                  $.ii('<?= t . $row[0] ?>', 36000, function () {
                      var t1v = $('<?= '.' . timer . $row[0] ?>').val();
                      if (t1v < 100) {
                          $('<?= '.' . timer . $row[0] ?>').val(t1v + 1);
                          localStorage.setItem('<?= timer . $row[0] . '_value'?>', t1v + 1)
                      } else {
                          localStorage.removeItem('<?= timer . $row[0] . '_value'?>');
                          $.ii('<?= t . $row[0] ?>');
                      }
                  });
              });
            </script>

但这对条形图并不满意，所有条形图都显示在相同的 var 值上

我不知道我能做什么 D:

Answer 1

好吧，我在这里看到了问题

在我的第 21 行上，我像var value = localStorage.getItem('<?= timer . $row[0] . '_value'?>') || 0; var value = localStorage.getItem('<?= timer . $row[0] . '_value'?>') || 0;

谢谢@Chris 我会接受推荐，谢谢<3