jquery 动态倒计时 php div 仅在第一个 div 下显示

Question

这是我第一次在这里提出有关堆栈溢出的问题。我找不到任何有助于解决此问题的信息。

以下 PHP 代码动态显示数据库中的所有相关图像。访问者可以点击图片，然后 ajax 处理点击。我引用数据属性来处理它。

我正在使用 jquery.countdown 在每张图片下方显示到期日期的倒计时。使用数据库中的到期日期。 jquery .countdown 代码在第一个元素下运行良好，但在其他动态元素下根本不显示。而且倒计时不是一个事件，所以 .on 似乎在我尝试过的任何方式下都不起作用。

感谢任何帮助。

while ($row = mysqli_fetch_assoc($result)) {
        $image = $row['image'];

        // RETRIEVE EXPIRATIONS

        $expirationData = mysqli_query($connection, "SELECT expiration FROM images WHERE image = '$image'");
        $expirationResult = mysqli_fetch_array($expirationData);
        $expirationData = $expirationResult['expiration'];

        ?>
        <div>
            <img id="visitor-click" data-exp="<?php echo $expirationData; ?>" src="<?php echo $image; ?>">


// SHOW COUNTDOWN 
<div id="expiration-countdown"></div>
        </div>
<?php }

?>

<script>
   var target = '<?php echo $expirationData; ?>';
    $("#expiration-countdown").countdown(target, function(event) {
        $(this).text(
            event.strftime('%Dd %Hh %Mm %Ss')
        );
    });
<script>

Answer 1

每个到期元素都需要运行 jQuery.countdown。

首先更改，类作为 ID 值的元素 ID 应该是唯一的，并且只在 DOM.

中出现一次

其次，我建议将 data-exp 属性从图像移动到倒计时元素本身，这样更容易获取值。请参阅下面的示例。

<?php while ($row = mysqli_fetch_assoc($result)): ?>
    <?php
        $image = $row['image'];

        // RETRIEVE EXPIRATIONS
        $expirationData = mysqli_query($connection, "SELECT expiration FROM images WHERE image = '$image'");
        $expirationResult = mysqli_fetch_array($expirationData);
        $expirationData = $expirationResult['expiration'];
    ?>
    <div>
        <img class="visitor-click" src="<?php echo $image; ?>">
        <div class="expiration-countdown" data-exp="<?php echo $expirationData; ?>"></div>
    </div>
<?php endwhile ?>

<script>
    /**
     * Loop through each count down element
     */
    $('.expiration-countdown').each(function() {

        /**
         * This is the current element in the loop iteration
         */
        var $div = $(this);

        /**
         * Get the data-exp attribute value
         */
        var date = $div.data('exp');

        /**
         * Init jQuery.countdown
         */
        $div.countdown(date, function(event) {
            $div.text( event.strftime('%Dd %Hh %Mm %Ss') );
        });
    });
</script>

jquery 动态倒计时 php div 仅在第一个 div 下显示

jquery countdown with dynamic php divs only displaying under first div

php

jquery

mysql

countdown