如何在 jquery 中使用一个类到 php/html foreach 循环？

Question

我的标题很混乱，但我的问题是..

有这个脚本插件，该插件将创建一个气泡状的进度条找到here。

在脚本中我有$('.demo').waterbubble();

现在有一个 foreach 循环是..

<?php foreach($bins as $binArray): ?>
  <div class="row">
    <?php foreach ($binArray as $bin):?>
      <div class="col-xs-8">
        <canvas class="demo"></canvas>
      </div>
    <?php endforeach;?>
  </div>
<?php endforeach; ?>

所以在这段代码中，它应该根据$bin 变量迭代画布并显示气泡。我测试了 6 次迭代，所以它应该显示 6 个气泡，但它只显示一个气泡，而其他的没有显示任何气泡。我检查了代码，<canvas class="demo"></canvas> 被正确迭代，但由于某种原因没有显示任何内容。有谁知道这是为什么？有没有办法使用它或解决这个问题？非常感谢！

Answer 1

我猜这是脚本的问题。您最好尝试使用唯一 ID 来初始化每个水泡。

<?php foreach($bins as $binArray): ?>
  <div class="row">
    <?php foreach ($binArray as $bin):?>
      <div class="col-xs-8">
        <canvas id="demo<?= $bin[number] ?>"></canvas>
      </div>
      <script>
        $('#demo<?= $bin[number] ?>').waterbubble();
      </script>
    <?php endforeach;?>
  </div>
<?php endforeach; ?>