javascript - for循环列表倒计时只出现在第一个

Question

美好的一天，我正在尝试在每个循环中复制我的 javascript 倒计时以及卡片图片。问题是即使放在循环本身内的表上，倒计时也只出现在第一个。我想知道我错过了什么。

还有其他代码，如在屏幕截图中显示的网页中添加卡片，一旦单击，计时器就会开始计时，但主要问题是循环不重复。当我在表格中添加纯文本代替 时，纯文本会显示在每张卡片上。

感谢您的帮助。

HTML:

  <div class="container">
      <br>
      <div class="row">
        <h2 class="bold_font text-align-center">LIST OF CLAIMED CARDS</h2><br>
        <?php
          $i = 0;
          foreach($lstOrders as $rowOrder) {
        ?>
          <div class="col-md-4 spacer">
            <div class="col-md-12">
              <?php
                $productid = $rowOrder['productid'];
                $rowProduct = $mcProduct->SelectObj_ProductId($db, $productid);
              ?>
            </div>
            <div class="col-md-12">
              <?php
                for($j = 0; $j < $rowProduct['packageid']; $j++) {
                  echo(' <span class="glyphicon glyphicon-gift color-black"></span> ');
                }
              ?>
            </div>


            <div class="col-md-12">
              <a href="info-detailed.php?i=<?php echo($rowProduct['productid']) ?>">
                <img src="../img/uploads/<?php echo($rowProduct['photosrc']) ?>" class="img-responsive clinic">
                <img src="../img/shadow-bottom.png" class="img-responsive">
              </a>

            </div>

            <table align="center">
              <tr>
                <td colspan="4">Reclaim This Coupon In:<hr></td>
              </tr>
              <tr align="center">
                <td id="c_countdown"></td>
              </tr>

            </table>
          </div>
        <?php
            $i = $i + 1;
            if($i >= 3) {
              echo('<div class="col-md-12"></div>');
              $i = 0;
            }
          } ?>

        <!-- Empty Col -->
        <div class="col-md-3 form-group">
        </div>
      </div> <!--row-->

      <div class="row">
        <div class="col-md-12 spacer">
        </div>
      </div>

    </div>

JavaScript:(c_countdown)

var countDownDate = new Date("Jan 5, 2019 15:37:25").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();

  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  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("c_countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("c_countdown").innerHTML = "EXPIRED";
  }
}, 1000);

在表中添加测试

Answer 1

不要使用 id 作为 c_countdown。 ID在网页上应该是唯一的。 document.getElementById 仅返回具有该 ID 的第一个元素。尝试使用类，然后遍历元素。

您可以在js代码中使用类似下面的内容，但在html中首先将id属性转换为class。

document.querySelectorAll('.c_countdown').forEach(function(elem){
  elem.innerHTML = 'whatever you want to set here'
})