如何使用PHP生成Bootstrap手风琴的数据目标

Question

我正在尝试使每个WordPress帖子在网格中产生自举手风琴(我正在使用Bootstrap Grid类(。但是我很难为每个特定帖子生成这些随机数据目标属性。

这些只是我在将它们导入WordPress并将我的实际内容与手风琴连接到WordPress之前尝试过的静态部分。

<?php $uuid = uniqid(); ?>
<div class="col-lg-4 col-xs-12 col-sm-12 col-md-4">
<img src="img/x.jpg" id="toggle-btn"
data-toggle="collapse" data-target="#<?php echo $uuid;?>">
</div>
<div class="col-lg-4 col-xs-12 col-sm-12 col-md-4">
<img src="img/y.jpg" id="toggle-btn"
data-toggle="collapse" data-target="#<?php echo $uuid;?>">
</div>
<div class="col-lg-4 col-xs-12 col-sm-12 col-md-4">
<img src="img/z.jpg" class="img-responsive">
</div>
</div>
<div id="<?php echo $uuid;?>" class="collapse">
<img src="img/x-collapsed.jpg">
</div>
<div id="<?php echo $uuid;?>" class="collapse">
<img src="img/y-collapsed.jpg">
</div>
<div id="<?php echo $uuid;?>" class="collapse">
<img src="img/z-collapsed.jpg">
</div>

第一个按预期工作，但即使在尝试之前，我也可以告诉第二个和第三个，依此类推。请记住，这些希望通过WordPress帖子生成，并且每个人都需要具有自己独特的数据目标，以在单击"打开"时显示相关的信息框。因此，此实际代码将像以下内容一样在foreach内部：

if ( $the_query->have_posts() ) { 
while ( $the_query->have_posts() ) {
$the_query->the_post();
...
}

现在，它给了我与第一个相同的折叠框，这很有意义，因为我没有对$ uuid做任何将其递增的框以对应其父。

我只需要帮助的只是数据目标，我该如何制作它，因此，对于每个手风琴，都会生成一个与实际折叠框相对应的唯一数据目标。我猜我应该将VAR限制在此： 但是我不知道该怎么办。

提前对任何帮助。

Answer 1

这是由Bootstrap制成的手风琴的工作示例。ID是动态生成的，以避免冲突。请检查以下示例，您可以根据您的要求对其进行自定义。默认情况下，第一张卡是打开的，而其他卡则以初始折叠。

<?php
$qargs = array(
    'posts_per_page'      => 3,
    'no_found_rows'       => true,
    'ignore_sticky_posts' => true,
);
$the_query = new WP_Query( $qargs );
?>
<?php if ( $the_query->have_posts() ) : ?>
    <div id="accordion">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <?php
            $heading_id = 'heading-' . get_the_ID();
            $content_id = 'collapse-' . get_the_ID();
            $is_first = ( 0 === $the_query->current_post ) ? true : false;
            ?>
            <div class="card">
                <div class="card-header" id="<?php echo esc_attr( $heading_id ); ?>">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#<?php echo esc_attr( $content_id ); ?>" aria-expanded="true" aria-controls="<?php echo esc_attr( $content_id ); ?>"><?php the_title(); ?></button>
                    </h5>
                </div>
                <div id="<?php echo esc_attr( $content_id ); ?>" class="collapse <?php echo ( $is_first ) ? 'show': ''; ?>" aria-labelledby="<?php echo esc_attr( $heading_id ); ?>" data-parent="#accordion">
                    <div class="card-body">
                        <?php the_excerpt(); ?>
                    </div>
                </div>
            </div><!-- .card -->
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
    </div><!-- #accordion -->
<?php endif; ?>