如何在Kirby CMS单页站点中用PHP为ID添加递增数字？

你可以通过在PHP循环中引入索引计数器，再配合事件委托处理JS交互，轻松实现需求，具体步骤如下：

1. 给PHP循环添加索引计数器 #

Kirby的foreach循环支持获取当前元素的索引，直接修改外层循环的写法，把索引作为递增数字的来源（默认索引从0开始，加1后从1开始计数）：

<?php foreach ($pages->listed() as $index => $p): ?>
    <div class="slideshow">
        <div class="slideshow-box">
            <div class="slideshow-holder">
                <?php foreach ($p->images() as $workimage): ?>
                    <div class="slide">
                        <?= $workimage ?><br><br>
                    </div>
                <?php endforeach ?>
            </div>
            <div class="tooltip">
                <!-- 用index+1生成递增ID -->
                <p id="myText-<?= $index + 1 ?>"><?= $p->worktitle() ?></p>
            </div>
            <div class="toolbox" id="myDIV-<?= $index + 1 ?>">
                <?= $p->description() ?>
            </div>
        </div>

        <div class="actions">
            <span>1/3</span>
        </div>

        <a href="#" class="prev">←</a>
        <a href="#" class="next">→</a>
    </div>
<?php endforeach ?>

2. 修改JS代码实现批量交互 #

原来的JS只针对单个元素，现在要处理多个带递增ID的元素，用事件委托更高效，不用逐个绑定事件：

<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 先隐藏所有toolbox元素
        document.querySelectorAll('.toolbox').forEach(box => {
            box.style.display = 'none';
        });

        // 通过事件委托处理所有点击事件
        document.addEventListener('click', function(e) {
            if (e.target.matches('.tooltip p')) {
                // 匹配对应的toolbox ID
                const textId = e.target.id;
                const divId = textId.replace('myText-', 'myDIV-');
                const targetDiv = document.getElementById(divId);
                
                // 切换显示状态
                targetDiv.style.display = targetDiv.style.display !== 'none' ? 'none' : 'block';
            }
        });
    });
</script>

方案优势 #

• PHP部分直接利用循环索引生成递增ID，无需额外维护计数器，简洁高效；
• JS采用事件委托，避免了冗余的循环绑定代码，同时支持后续动态添加的元素，扩展性更强。

内容的提问来源于stack exchange，提问作者yeoleum yun