php/html foreachループにjqueryのクラスを使用するには？

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

ので、このコードでは、それはキャンバスと表示が変数に応じて、気泡を繰り返す必要があります。 6回の反復でテストしたので、6つのバブルが表示されますが、1つのバブルが表示され、他のバブルは表示されません。私はコードを調べ、<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; ?>