如何使此Javascript函数适用于更多元素

Question

我有一直在使用的“构建”功能，却遇到了问题。 当您按下某个按钮时，将向用户显示一个计时器。 这实际上工作得很好。 但是，当按下同一类别的另一个按钮时，计时器将只显示第一个按钮， 如您在此图片中所见

所有这些建筑物都从数据库中循环出来。 在此循环中是显示计时器的Javascript函数。 （使用Jquery倒计时）。

有谁能告诉我如何正确倒计时计时器？

这是PHP循环中的计时器部分：

<button class="btn btn-disabled" type="button">Workers are currently working on this property</button>
<span>Time untill completion: <span id="cd" data-countdown-id="<?php echo $userrow['building_id']; ?>" data-countdown="<?php echo $timedifference->format("%H:%I:%S"); ?>"></span> </span>

<script>
    $(function createCountDown() {
     var cd = document.getElementById("cd")
     var countdown = cd.getAttribute("data-countdown")
     var cdid = cd.getAttribute("data-countdown-id");
     $('#buycd' + cdid).countdown({
         until: countdown
     });
 });
 </script>

<div id="buycd<?php echo $userrow['building_id']; ?>"></div>

如果您需要查看更多代码，请告诉我。

PS：如果我只启动一个计时器，则在任何一个计时器上都可以正常工作。

Answer 1

您正在使用cd作为id，但是从您的注释来看，它已应用于多个元素。 元素必须具有唯一的ID（或没有ID）。 因此，您应该为此使用一个类，例如class="cd" 。

那么您的代码如下所示：

$(function createCountDown() {
     $('.cd').each(function(){
        var countdown = $(this).attr('data-countdown');
        var cdid = $(this).attr('data-countdown-id');
        $('#buycd' + cdid).countdown({
          until: countdown
        });
     })     
 });

我没有测试该代码段...期待错误:)