php foreachループ内でjavascriptのカウントダウンタイマーを作成する

Question

私はW3Schoolsで見つかったjavascriptコードを使用してカウントダウンタイマーを作成しようとしています。コードはいつも私のために働いていましたが、今は、ページにコメントを表示するPHPループ内でタイマーを作成する必要があります。これは、javascriptのタイマーコードが各コメントに対して一意でなければならないことを意味し、私は正しいと感じましたが、うまくいきません。ここに私が持っているものがあります：

<?php 
$post_comments = $this->db->get_where('post_comments', array('display' => 'true'))->result_array(); 
foreach ($post_comments as $comment) { ?> 
    Expire time - <span id="cRemTime<?php echo $comment->id; ?>" style="color: red"> </span> 

    <?php 
    $comment_stop_time = date("M j, Y H:i:s", strtotime($comment->time. '+1 hours')); //timestamp from table + 1 hour 
    ?> 

    <script> 
    var ExhaustTime = "<?php echo $comment_stop_time; ?>"; 
    var countDownDate = new Date(ExhaustTime).getTime(); 
    var x = setInterval(function() { 
     var now = new Date().getTime(); 
     var distance = countDownDate - now;  
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 
     document.getElementById("cRemTime<?php echo $comment->id; ?>").innerHTML = hours + ": " + minutes + ": " + seconds; 
     if (distance < 0) { 
      clearInterval(x); 
      document.getElementById("cRemTime<?php echo $comment->id; ?>").innerHTML = "Exhausted!"; 
     }  
    }, 1000); 
    </script> 

<?php } ?> 

私は何が欠けていますか？
注：私はコード・イグナイターを使用します。

Answer 1

定義するjavascript変数（すべてx = setInterval()を含む）はグローバルであり、一度しか存在しないことを意味します。したがって、最後のものだけが「有効」になります。あなたは可能性偽-'namespace」彼らはあなたがスパンで行うのと同じ方法：もちろん

var ExhaustTime<?php echo $comment->id; ?> = "<?php echo $comment_stop_time; ?>"; 
// the same for countDownDate and x (the setInterval) 

これは、エレガントなソリューションではありませんが、それはそれは私が思うに動作させるでしょう。

優雅なソリューションは、すべてのループでパラメータを渡すクラスまたは関数内のすべてを包括します。だから、一度だけ、そのオブジェクトを持っていますが、

は、このようなのプリミティブバージョンは、このようなものかもしれない（多分INIT-関数のように）すべてのループでそれを呼びたい：
（テストしていません）

さらに読書のために

// OUTSIDE php foreach loop, so only once in a <script> 
function MyCounter(exhaustTime,elementId) { 

    // this.ExhaustTime = exhaustTime; // there's no need for that extra var 
     // you might want to check here if you got a valid exhaustTime (or later countDownDate). 

    this.countDownDate = new Date(exhaustTime).getTime(); 
    this.init = setInterval(function() { 
     var now = new Date().getTime(); 
     var distance = this.countDownDate - now;  
     var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
     var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
     var seconds = Math.floor((distance % (1000 * 60))/1000); 
     // better find that element only once and re-use it 
     var target = document.getElementById(elementId); 
     target.innerHTML = hours + ": " + minutes + ": " + seconds; 
     if (distance < 0) { 
      clearInterval(x); 
      target.innerHTML = "Exhausted!"; 
     }  
    }, 1000); 

} 

// inside your php foreach loop (and in a <script>) 
var Counter<?php echo $comment->id; ?> = new MyCounter(<?php echo $comment_stop_time; ?>, "cRemTime<?php echo $comment->id; ?>"); 
Counter<?php echo $comment->id; ?>.init(); 

：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS