JavaScript实现多HTML类复用同一函数：点击展开文本（查看更多按钮）

先修正你代码里的核心问题 #

1. getElementsByClassName('.readMore')写法错误：这个方法接收的是纯类名，不需要加.，正确写法是document.getElementsByClassName('readMore')。而且它返回的是HTMLCollection（类数组对象），不能直接给整个集合绑定事件，得遍历每个元素单独绑定。
2. document.querySelector('.main-p')只会返回第一个匹配的元素，所以不管点击哪个按钮，操作的都是第一个文本块，这就是你后面代码只生效第一个的原因。

你设想的两种方案都完全可行，具体实现如下： #

方案1：HTML中通过data-*属性关联按钮与对应文本

给每个按钮和对应的文本块添加匹配的自定义属性，明确绑定关系：

<div class="main-container">
    <h6 class="main-artist"><em class="main-emph">content</em>content</h6>
    <p class="main-p" data-text-id="text-1"><span class="moreText"> Lorem ipsum </span></p>
    <button class="readMore" data-target="text-1">read more</button>
</div>
<div class="main-container">
    <h6 class="main-artist"><em class="main-emph">content</em>content</h6>
    <p class="main-p" data-text-id="text-2"><span class="moreText"> Messi GOAT </span></p>
    <button class="readMore" data-target="text-2">read more</button>
</div>

对应的JS代码：

// 定义点击逻辑函数
function toggleText(e) {
    const targetTextId = e.target.dataset.target;
    // 根据data属性找到对应文本块
    const targetText = document.querySelector(`.main-p[data-text-id="${targetTextId}"]`);
    targetText.classList.toggle('show-more');
    // 切换按钮文本
    e.target.textContent = e.target.textContent === 'read more' ? 'read less' : 'read more';
}

// 给所有按钮绑定点击事件
document.querySelectorAll('.readMore').forEach(btn => {
    btn.addEventListener('click', toggleText);
});

方案2：JS循环+DOM相对位置查找（无需修改原有HTML）

利用按钮和文本块在同一个main-container父容器的结构关系，通过按钮向上找到父容器，再在容器内定位对应文本，这种方式更简洁：

// 获取所有按钮并遍历绑定事件
document.querySelectorAll('.readMore').forEach(btn => {
    btn.addEventListener('click', function() {
        // 找到当前按钮所在的父容器
        const parentContainer = this.closest('.main-container');
        // 在父容器内找到对应的文本块
        const targetText = parentContainer.querySelector('.main-p');
        targetText.classList.toggle('show-more');
        // 切换按钮文本
        this.textContent = this.textContent === 'read more' ? 'read less' : 'read more';
    });
});

补充说明 #

• 如果之前用getElementsByClassName遍历失败，是因为它返回的HTMLCollection不是数组，需要先转成数组再遍历：Array.from(document.getElementsByClassName('readMore')).forEach(...)
• 用textContent代替innerHTML修改按钮文本更安全，避免潜在的XSS风险

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