foreach生成列表点击按钮仅修改首个项样式的问题求助

问题根源 #

你循环生成的每个列表项里都用了相同的id="showMoreLessId"和id="showMoreLess"，但HTML规则里ID必须是全局唯一的。document.querySelector('#xxx')只会返回页面中第一个匹配该ID的元素，所以不管点哪个按钮，都只会操作第一个项的内容。

修复方案 #

1. 把重复的ID替换成类名，避免全局ID冲突
2. 将JS函数移出循环，避免重复定义相同函数
3. 通过点击的按钮，定位到它所属的列表项里的对应内容，实现精准控制

修改后的完整代码 #

<?php foreach ($items as $item): ?>
    <div class="item">
        <h4>Versie: <?= $item->name; ?></h4>
        <div class="showMoreLessContent" style="display:none;">
            <p>Issues in versie: <?= $res->issuesFixedCount; ?> </p>
            <p>Afgeronde issues: <?= $roundedIssue;?> </p>
            <p>Nog te verwerken issues: <?= $uns->issuesUnresolvedCount;?> </p>
        </div>
        <small><?= $item->releaseDate; ?></small>
        <a onclick="togglePost(this)" class="toggleButton">Toon meer</a>
        <a>|</a>
        <a href="<?= 'version/?version=' . $item->name; ?>">Meer info</a>
    </div>
<?php endforeach; ?>

<script>
function togglePost(btn) {
    // 通过按钮找到所属的item容器
    const item = btn.closest('.item');
    // 在当前item里找到内容区域和按钮文本
    const content = item.querySelector('.showMoreLessContent');
    const btnText = btn;

    if (content.style.display === 'inline') {
        content.style.display = 'none';
        btnText.innerHTML = 'Toon meer';
    } else {
        content.style.display = 'inline';
        btnText.innerHTML = 'Toon minder';
    }
}
</script>

关键改动说明 #

• 移除了循环内重复生成的<script>标签，把函数放到循环外只定义一次
• 将showMoreLessId和showMoreLess改为类名showMoreLessContent和toggleButton
• 按钮的onclick传递this参数，让函数知道是哪个按钮被点击了
• 用closest('.item')定位到当前按钮所在的列表项，再用querySelector在该范围内找对应的内容元素，确保操作的是当前项的内容

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