jquery обратный отсчет с динамиками c php деления отображаются только при первом делении - PullRequest
Новая
       5

jquery обратный отсчет с динамиками c php деления отображаются только при первом делении

0 голосов
/ 06 февраля 2020

Я впервые задаю здесь вопрос о большом переполнении стека. У меня проблемы с поиском информации, которая помогает с этой проблемой.

Следующий код PHP динамически отображает все соответствующие изображения из базы данных. Посетитель может нажать на изображение и ajax обрабатывает щелчок. Я ссылаюсь на атрибут данных, чтобы обработать это.

Я использую jquery .countdown для отображения обратного отсчета до даты истечения срока действия под каждым изображением. Использование даты истечения срока действия в базе данных. Код jquery .countdown отлично работает под первым элементом, но не отображается вообще с другими элементами динамического c. И обратный отсчет не является событием, так что .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>

1 Ответ

0 голосов
/ 07 февраля 2020

Вам нужно будет запустить jQuery .countdown для каждого элемента срока действия.

Прежде всего, идентификаторы элементов для классов в качестве значений идентификаторов должны быть уникальными и появляться в 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>
...