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属性转换为类。

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

Answer 2

您在此处执行echo语句后忘记了分号：

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

for循环列表倒计时仅在第一个中显示

2 个答案: