javascript - 如何在 php 中动态使用多个 bootstrap collapse 元素

Question

我正在使用此代码，其中包含 html 和 php，当折叠中有多个元素时，只有第一个元素正常工作，因为有一个名为 collapseOne 的 ID，它应该为每个元素动态更改。

所以，问题是如何动态改变id

 <div class="accordion">
    <?php foreach ($topics_list->result_array() as $row) { ?>    
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    <h2><?php echo $row['name'];
        ?></h2>
                </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse ">
                <div class="accordion-inner">
                    <b><h3> Material Link-:<?php
                            echo "<a href='" . $row['link'] . "'>Link</a></h3></b>";
                            echo"<br> <b><h3>Hardness-:";
                            echo $row['hardness'] . "</h3></b>";
                            echo "<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
                            ?>
                </div>
            </div>
       </div>            
                        <?php } ?>
</div>
                        </div>            
                    <?php } ?>
                    </div>

Answer 1

在每次迭代时增加一个索引并将其包含在标记输出中

<div class="accordion">
    <?php 
        $i=0;
        foreach ($topics_list->result_array() as $row) {
        $i++;
        ?>    
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" 
                 data-toggle="collapse" data-parent="#accordion2"
                 href="#collapse<?=$i?>">
                    <h2><?php echo $row['name'];
        ?></h2>
                </a>
            </div>
            <div id="collapse<?=$i?>" class="accordion-body collapse ">
                <div class="accordion-inner">
                    <b><h3> Material Link-:<?php
                            echo "<a href='" . $row['link'] . "'>Link</a></h3></b>";
                            echo"<br> <b><h3>Hardness-:";
                            echo $row['hardness'] . "</h3></b>";
                            echo "<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
                            ?>
                </div>
            </div>
       </div>            
                        <?php } ?>
</div>
                        </div>            
                    <?php } ?>
                    </div>