PHP循环生成章节列表，点击无法获取对应章节号的问题求助

你的代码目前有几个核心问题导致无法获取点击的章节号，我来逐一拆解并给出修复方案：

1. 重复的ID属性 #

你循环生成的所有<p>标签都用了同一个id="currChapter"，但在DOM中ID必须是唯一的，所以document.getElementById("currChapter")永远只会返回第一个匹配的元素，自然没法区分不同章节。

2. 点击事件未关联具体章节 #

你把点击事件绑定在父容器#chapters上，但没有获取到实际被点击的子元素，也没有传递对应的章节号信息。

3. document.write的使用问题 #

document.write会直接清空当前页面的内容并写入新内容，这通常不是展示点击结果的合理方式，建议用DOM操作更新页面的指定区域。

修复后的代码示例（推荐事件委托方案） #

这种方案不需要给每个章节元素单独绑定事件，性能更优，尤其是当章节数量较多时：

HTML/PHP部分：

<div id="chapters">
    <?php $array = range(1,20); foreach($array as $chapter) { ?>
        <!-- 用data-chapter存储章节号，去掉重复的id -->
        <p class="chapter-item" data-chapter="<?php echo $chapter;?>">Chapter <?php echo $chapter;?></p>
    <?php } ?>
</div>
<!-- 新增一个区域用来展示点击的章节号 -->
<div id="selected-chapter"></div>

JavaScript部分：

// 给父容器绑定点击事件
document.getElementById('chapters').addEventListener('click', function(e) {
    // 确认点击的是章节元素
    if (e.target.classList.contains('chapter-item')) {
        // 获取data-chapter里的章节号
        const chapterNum = e.target.dataset.chapter;
        // 更新展示区域的内容，替代document.write
        document.getElementById('selected-chapter').textContent = `你点击了章节：${chapterNum}`;
    }
});

另一种方案：给每个章节单独绑定点击事件 #

如果更习惯这种方式，也可以这么写：

HTML/PHP部分：

<div id="chapters">
    <?php $array = range(1,20); foreach($array as $chapter) { ?>
        <!-- 直接把章节号作为参数传给点击函数 -->
        <p class="chapter-item" onclick="showChapter(<?php echo $chapter;?>)">Chapter <?php echo $chapter;?></p>
    <?php } ?>
</div>
<div id="selected-chapter"></div>

JavaScript部分：

function showChapter(chapterNum) {
    document.getElementById('selected-chapter').textContent = `你点击了章节：${chapterNum}`;
}

这两种方案都能解决你的问题，推荐第一种事件委托的方式，它更符合现代前端的最佳实践，也更容易维护~

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