php - 向 PHP/HTML 循环添加不同的数据 ID

Question

我创建了一个调用帖子的循环，这样我就可以轻松地在我的网站上显示帖子，但是......我正在使用 animate.css 添加动画，我现在面临的一个问题是所有这些元素都有相同的数据 ID，因此它们会同时滚动...

我是 PHP 的新手，所以我不知道是否有一种方法可以为每个 div 提供不同的数据 ID，以便它们一个一个地滚动？

到目前为止，这是我的代码；

<div class="animatedParent animateOnce" data-appear-top-offset='-525' data-sequence='500' style="margin: 40px 0; text-align: center;">
<h2 class="animated bounceInUp" data-id='14' style="text-transform: uppercase;">Recent Events at Pontins!</h2>
    <div class="past-events">
    <?php query_posts('cat=#&posts_per_page=4'); ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="one-fourth animated bounceInLeft" data-id='15'>
                <a href="<?php echo get_permalink(); ?>">
                    <?php the_post_thumbnail('large_wide'); ?>
                </a>
                <h4><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h4>
            <?php the_excerpt(); ?>
            </div>
        <?php endwhile; ?>
    <?php wp_reset_query(); ?>
    </div>
<div style="clear:both;"></div>
</div>

http://www.stuartgreen.me.uk/pontins-events/wp-content/themes/genesis-sample/js/css3-animations.js这是 JS 的链接(我正在使用“Jack McCourt - Animate It”)

Answer 1

您可以在您的 div 的 data-id 属性中使用它。

<?php while (have_posts()) : the_post(); ?>
   <div class="one-fourth animated bounceInLeft" data-id='<?php echo the_ID(); ?>'>
...