如何使此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
        });
     })     
 });

我沒有測試該代碼段...期待錯誤:)