問題jqueryカウントダウンはproduct1のタイマーのみを表示しますが、product2、.. n productは表示しません

Question

<script type="text/javascript"> 
     $(function() { 
      var id = $("#id").val(); 
      var endDate = $("#endtime_" + id).val(); 
      $('#defaultCountdown_'+id).countdown({until: endDate}); 
     }); 
    </script> 

    while($row = mysql_fetch_assoc($result)) 
    { 
... 
    ?> 
    <input type="hidden" id="id" value="<?php echo $row['id'] ?>" /> 
    <span id="<?php echo "defaultCountdown_" . $row['id'] ?>"></span> 
    <input type="hidden" id="<?php echo "endtime_" . $row['id']?>" value="<?php echo $row['end_time'] ?>" /> 
    <?php 
    } 

ヘルプme !!!

Answer 1

問題は、HTML属性IDに同じ値を使用して隠された入力を作成している、次のとおりです。

<input type="hidden" id="id" value="<?php echo $row['id'] ?>" /> 

ID年代は一意でなければならないので、これは、動作しません。

PHPコードを変更して、すべての非表示入力に対して一意のIDとクラス名を追加し、すべてをjQueryで選択できるようにします。

while($row = mysql_fetch_assoc($result)) 
{ 
?> 
<input type="hidden" class="hiddenId" id="id_<?php echo $row['id'] ?>" value="<?php echo $row['id'] ?>" /> 
<span id="<?php echo "defaultCountdown_" . $row['id'] ?>"></span> 
<input type="hidden" id="<?php echo "endtime_" . $row['id']?>" value="<?php echo $row['end_time'] ?>" /> 
<?php 
} 

その後、$(".hiddenId")を選択することで、すべての隠された入力スルー反復IDを取得し、カウントダウンを開始します。

<script type="text/javascript"> 
$(function() { 
    $(".hiddenId").each(function() { 
     var id = $(this).val(); 
     var endDate = $("#endtime_" + id).val(); 
     $('#defaultCountdown_'+id).countdown({until: endDate}); 
    }); 
}); 
</script>